/* fonts
-------------------------------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-100.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-regular.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-500.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-600.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fira-sans-latin-700.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* variables
-------------------------------------------------------------------------------------------------------------- */
:root {
--font-main: 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;
--drug-bg:    #FF8A42;
--drug-alt:   #FF8A42E6;
--drug-light: #FF8A4266;
--int-bg:     #7E2E84;
--int-alt:    #8D3B93;
--int-light:  #7E2E8433;
--desel-bg:   #CCCCCC;
--desel-text: #888;
--c1: #44947C;
--c2: #418DA1;
--c3: #3B82B7;
--c4: #3473B9;
--c5: #5B61A7;
--c6: #4A4E7D;
--border: #fdfdfd;
--cell-h: 80px;
--verde: #009c4d;
}


/* reseteo
-------------------------------------------------------------------------------------------------------------- */
* {box-sizing: border-box;}
a {text-decoration:none;}
html, body {font-family: var(--font-main);color:#000;background:#fdfdfd;}
ul {list-style-type: none;padding:0;margin:0;}
h1, h2, h3, h4, h5, h6 {margin:0;padding:0;font-size:inherit;line-height:inherit;font-weight:inherit;}
.form-control:focus {border-color:#666;outline:0;-webkit-box-shadow:none;box-shadow:none;}
.btn:focus, .btn:active:focus, .btn.active:focus, a:focus, .btn:active, .btn.active {outline:none;outline-offset:0;}
label.error {font-size:11px !important;line-height:11px !important;padding:4px 5px 5px;color:#fff;background:#ff0000;text-transform:uppercase;}
button:focus {outline:none;}
.navbar-toggler:focus {box-shadow:none;}
hr {border-top:1px solid #333;opacity:1;border-radius:0x;width:100%;margin:0 auto;}
body {min-width:1180px;}
.container, .container-xl {max-width:1140px;}


/* botones
-------------------------------------------------------------------------------------------------------------- */
.btn-aceptar, .btn-aceptar:active, .btn-aceptar:focus {background:var(--verde);border:none !important;border-radius:5px;font-weight:500;color:#fff !important;padding:6px 15px;}
.btn-aceptar:hover {color:#fff !important;background:#026d37 !important;}
.btn-cancelar, .btn-cancelar:active, .btn-cancelar:focus {background:#999 !important;border-radius:5px;font-weight:400;color:#fff !important;padding:6px 15px;}
.btn-cancelar:hover {color:#fff !important;background:#000 !important;}


/* selección de perfil
-------------------------------------------------------------------------------------------------------------- */
.centrado {min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.perfil {background:url(../images/fondo-seleccion-de-perfil.jpg) right center no-repeat;background-size:cover;xborder:2px solid #009c4d;border-radius:10px;}
.perfil h3 {color:#111;font-size:46px;line-height:56px;}
.btn-perfil, .btn-perfil:active, .btn-perfil:focus {background:#fff !important;border:2px solid #009C4D !important;border-radius:10px;font-weight:500;color:#009C4D !important;font-size:28px;line-height:32px;padding:30px;width:100%;text-align:left;box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.25);}
.btn-perfil img {filter: invert(37%) sepia(61%) saturate(6466%) hue-rotate(142deg) brightness(101%) contrast(101%);height:30px;}
.btn-perfil:hover {color:#fff !important;background:#009C4D !important;}
.btn-perfil:hover img {filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(306deg) brightness(104%) contrast(101%);}
.perfil-logos {background:url(../images/fondo-perfil-logos.png) center center repeat-y;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.perfil-logos-decidir {background:#009c4d;padding-top:40px;padding-bottom:40px;border-top-right-radius:50px;color:#fff;}
.perfil-logos-decidir h1 {font-weight:500;font-size:33px;line-height:40px;}
.perfil-logos-decidir h2 {font-weight:100;font-size:30px;line-height:36px;}
.perfil-logos h3 {font-weight:400;font-size:19px;line-height:23px;color:#1c1b18;}
.perfil-logos img {height:40px;margin-bottom:8px;}
.perfil footer {color:#fff;}
.perfil footer img {filter: invert(82%) sepia(100%) saturate(1%) hue-rotate(136deg) brightness(103%) contrast(101%);}
.perfil .btn-footer, .perfil .btn-footer:active, .perfil .btn-footer:focus {border:1px solid #fff;color:#fff;}


/* introduccion
-------------------------------------------------------------------------------------------------------------- */
.intro {background:url(../images/fondo-introduccion.jpg) right center no-repeat;background-size:cover;xborder:2px solid #009c4d;height:688px;border-radius:10px;}
.intro-texto {color:#000;font-size:18px;line-height:24px;}
.intro-texto img {xfilter: invert(100%) sepia(0%) saturate(1%) hue-rotate(351deg) brightness(103%) contrast(101%);height:65px;}
.btn-introduccion, .btn-introduccion:active, .btn-introduccion:focus {background:#fff !important;border:2px solid #009C4D !important;border-radius:10px;font-weight:500;color:#009C4D !important;font-size:24px;line-height:24px;padding:20px;width:100%;text-align:left;box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.25);}
.btn-introduccion img {filter: invert(37%) sepia(61%) saturate(6466%) hue-rotate(142deg) brightness(101%) contrast(101%);height:20px;}
.btn-introduccion:hover {color:#fff !important;background:#009C4D !important;}
.btn-introduccion:hover img {filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(306deg) brightness(104%) contrast(101%);}


/* header
-------------------------------------------------------------------------------------------------------------- */
header {background:#fff;padding:16px 0;box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);}
header h1 {font-weight:500;font-size:24px;line-height:24px;color:#000 !important;}
header h2 {font-weight:100;font-size:21px;line-height:23px;color:#000 !important;}
header img {height:27px;margin-bottom:7px;}
header h3 {font-weight:400;font-size:13px;line-height:13px;color:#000 !important;}


/* footer
-------------------------------------------------------------------------------------------------------------- */
footer {font-size:11px;line-height:15px;color:#878787;}
.btn-footer, .btn-footer:active, .btn-footer:focus {display:inline-flex;padding:2px 5px;border:1px solid #ccc;background:transparent;border-radius:5px;font-size:10px;line-height:10px;font-weight:400;font-family:var(--font-main);letter-spacing:0.3px;color:#878787;cursor:pointer;}
.btn-footer:hover {background:transparent;border-color:#000;color:#000;}
footer img {height:32px;filter: invert(43%) sepia(8%) saturate(0%) hue-rotate(181deg) brightness(90%) contrast(94%);}


/* toolbar
-------------------------------------------------------------------------------------------------------------- */
.btn-toolbar, .btn-toolbar:active, .btn-toolbar:focus {display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid #4D4D4D;background:#fff;border-radius:5px;font-size:11px;line-height:17px;font-weight:500;font-family:var(--font-main);letter-spacing:0.3px;color:#4D4D4D;cursor:pointer;transition:transform 0.3s ease;}
.btn-toolbar:hover {background:#fff;border-color:#000;color:#000;transform:scale(1.02);}
.btn-toolbar img {flex-shrink:0;height:16px;width:16px;filter:invert(27%) sepia(3%) saturate(0%) hue-rotate(183deg) brightness(95%) contrast(81%);}
.btn-toolbar:hover img {filter:none;}
.btn-toolbar.btn-deshabilitado, .btn-toolbar.btn-deshabilitado:hover {background:#fff;border:1px solid #999 !important;color:#999;transform:none !important;cursor: default !important;}
.btn-toolbar.btn-deshabilitado img, .btn-toolbar.btn-deshabilitado:hover img {filter:invert(59%) sepia(9%) saturate(0%) hue-rotate(218deg) brightness(104%) contrast(81%) !important;}
/* Mensaje-guía (se oculta por JS al tocar un encabezado) */
.col-hint {display:inline-block;background:#FEFCAD;border:none;border-radius:8px;padding:7px 12px;font-size:13px;line-height:18px;color:#000;}
.col-hint img {height:16px;}
.col-hint strong {font-weight:700;}


/* tabla
-------------------------------------------------------------------------------------------------------------- */
.table-container {overflow-x:auto;}
#main-table {table-layout:fixed;width:1140px;border-collapse:collapse;}
#main-table col {transition:width 0.55s cubic-bezier(0.65, 0, 0.35, 1);}
#main-table th, #main-table td {overflow:hidden;transition:width 0.55s cubic-bezier(0.65, 0, 0.35, 1);}
#main-table thead tr th {padding:10px 3px;text-align:center;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing: 0px;color:#fff;cursor:pointer;vertical-align:middle;line-height:12px;white-space:pre-line;user-select:none;border-right:1px solid rgba(255,255,255,0.15);}
th.th-name {background:transparent;cursor: default;color:transparent;}
th[data-col="perdida"]    {background:var(--c1);border-top-left-radius:7px;}
th[data-col="beneficios"] {background:var(--c2);}
th[data-col="eventos"]    {background:var(--c3);}
th[data-col="abandonos"]  {background:var(--c4);}
th[data-col="rutina"]     {background:var(--c5);}
th[data-col="costo"]      {background:var(--c6);border-top-right-radius:7px;}
th[data-col].col-active {position:relative;}
.tr-section td, #main-table thead tr th.td-section {background:var(--drug-light);color:#000;font-weight:500;font-size:13px;line-height:19px;text-transform:uppercase;letter-spacing:1.1px;padding:4px 10px;border-top:1px solid #fdfdfd;border-bottom:1px solid #fdfdfd;border-top-left-radius:7px;border-top-right-radius:7px;text-align:left;}
.tr-section.interv td, #main-table thead tr th.td-section.interv {background:var(--int-light);}
.tr-intervention td {vertical-align:middle;border-bottom:1px solid var(--border);padding:0;height:var(--cell-h) !important;}
td.td-name {padding:10px;background:var(--drug-bg);color:#fff;}
td.td-data {background:#F3F3F3;}
td.td-data a {display:flex;width:100%;height:80px;align-items:center;justify-content:center;}
td.td-data a:hover, td.has-modal:hover {background:#e7e7e7 !important;}
.tr-intervention.row-alt td.has-modal:hover {background: #ececec !important;}
.tr-intervention.interv td.td-name {background:var(--int-bg);}
.tr-intervention.drug.row-alt td.td-name  { background: #FF8A42E6; }
.tr-intervention.interv.row-alt td.td-name { background: #8D3B93; }
.tr-intervention.row-alt td.td-data        { background: #f9f9f9; }
.tr-intervention.drug.row-selected           .td-data { background: var(--drug-bg); }
.tr-intervention.drug.row-alt.row-selected   .td-data { background: var(--drug-alt); }
.tr-intervention.interv.row-selected         .td-data { background: var(--int-bg);  }
.tr-intervention.interv.row-alt.row-selected .td-data { background: var(--int-alt); }
.tr-intervention.row-selected .td-data .cell-mini,
.tr-intervention.row-selected .td-data .cell-full {filter: brightness(0) invert(1);}
.tr-intervention.row-hidden td.td-name {background:var(--desel-bg) !important;color:var(--desel-text);}
.tr-intervention.row-hidden td.td-data {background:#F3F3F3 !important;opacity:0.4;filter:grayscale(1);}
.tr-intervention.row-hidden .int-name {color:var(--desel-text);}
.tr-intervention.row-hidden .btn-row-icon img {filter:invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(85%);}
.int-name {font-weight:500;font-size:14px;line-height:17px;cursor:default;transition:opacity 0.15s;}
.int-name a {color:#fff;cursor:pointer;}
.row-controls {display:flex;align-items:center;gap: 5px;line-height:10px;}
input[type="checkbox"] {appearance:none;width:16px;height:16px;background:#fff;border:none;cursor:pointer;position:relative;border-radius:3px !important;}
input[type="checkbox"]:checked::after {content:"";position:absolute;top:2px;left:6px;width:4px;height:10px;border:solid black;border-width:0 2px 2px 0;transform:rotate(45deg);}
.btn-row-icon {background:none;border:none;padding:0;cursor:pointer;transition:opacity 0.15s;border:1px solid transparent;line-height:10px;border-radius:5px;padding:2px;}
.btn-row-icon:hover {border:1px solid #fff;}
.btn-row-icon img {width:16px;height:16px;filter:invert(99%) sepia(88%) saturate(0%) hue-rotate(120deg) brightness(112%) contrast(101%);}
.btn-row-icon:hover {opacity:1;}
td.td-data {text-align: center;vertical-align:middle;padding:8px 6px;padding:0px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
td.td-data.col-active {background:#f3f3f3;}
.cell-mini {display:none;justify-content:center;align-items:center;}
.cell-full {display:none;flex-direction:column;align-items:center;gap:3px;opacity:0;transition:opacity 0.3s ease 0.25s;}
.cell-full.is-visible {opacity:1;}
.cell-mini > img, .cell-full > img { max-width: 100%; height: auto; }
.cost-img {display:block;max-width:60px;height:auto;margin:0 auto;}
.cost-line {display:flex;align-items:center;justify-content:center;text-align:left;}
.cost-line .cost-img {flex:0 0 auto;margin:0;}
.cost-text {font-size:13px;line-height:16px;color:#4A4E7D;width:270px;padding-left:12px;}
.cost-text p {margin:0 0 10px;}
.cost-text p:last-child { margin-bottom:0;}
.cost-modal { justify-content:flex-start;}
.cost-modal .cost-text {width:auto;flex:1;} 
.modal-costo .cost-text {font-size:18px;line-height:24px;padding-left:15px;}


/* modal
-------------------------------------------------------------------------------------------------------------- */
.modal-header.drug   {background:var(--drug-bg);}
.modal-header.interv {background:var(--int-bg);}
.modal-header h5, .modal-header .btn-close {color:#fff;font-size:18px;}
.modal-header .btn-close {filter:invert(1) brightness(2);box-shadow: none !important}
.modal-section {display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid #eee;}
.modal-section:last-child {border-bottom:none;}
.modal-icon-wrap {flex-shrink:0;width:64px;display:flex;justify-content:center;}
.modal-section-title {font-weight:700;font-size:14px;color:var(--int-bg);margin-bottom:5px;}
.modal-section-title.drug {color:var(--drug-bg);}
.modal-section-text {font-size:13px;color:#444;line-height:1.5;margin:0;}
.td-data.has-modal {cursor:pointer;position:relative;}
/* Triángulo indicador en las celdas clickeables, SOLO cuando la columna está abierta
   (col-active). Color = el del encabezado de esa columna (--c1..--c6). Esquina inf. derecha. */
.td-data.has-modal.col-active::after {
  content:'';
  position:absolute;
  right:0;
  bottom:0;
  width:0;
  height:0;
  border-left:11px solid transparent;
  border-bottom:11px solid transparent; /* el color lo define cada columna */
}
.td-data.has-modal.col-active[data-col="perdida"]::after    { border-bottom-color: var(--c1); }
.td-data.has-modal.col-active[data-col="beneficios"]::after { border-bottom-color: var(--c2); }
.td-data.has-modal.col-active[data-col="eventos"]::after    { border-bottom-color: var(--c3); }
.td-data.has-modal.col-active[data-col="abandonos"]::after  { border-bottom-color: var(--c4); }
.td-data.has-modal.col-active[data-col="rutina"]::after     { border-bottom-color: var(--c5); }
.td-data.has-modal.col-active[data-col="costo"]::after      { border-bottom-color: var(--c6); }
.modal-comun .modal-header {background:var(--verde);}
.modal-comun .modal-footer {border-top:none;padding-top:0 !important;}
.modal-comun-campo {background:#f0f0f0;}
.modal-referencias hr {border-top:1px solid #ddd;margin:25px auto;}

.modal-header {color:#fff;font-weight:500;border:none;}
.modal-droga .modal-header {background:var(--drug-bg);}
.modal-intervencion .modal-header {background:var(--int-bg);}
.modal-columna {padding:12px 16px;color:#fff;text-transform:uppercase;font-weight:500;font-size:18px;line-height:22px;}
.modal-perdida .modal-columna {background:var(--c1);}
.modal-beneficios .modal-columna {background:var(--c2);}
.modal-eventos .modal-columna {background:var(--c3);}
.modal-abandono .modal-columna {background:var(--c4);}
.modal-como .modal-columna {background:var(--c5);}
.modal-costo .modal-columna {background:var(--c6);}

.modal-body h2 {font-weight:500;font-size:18px;line-height:22px;margin-bottom:16px;}
.modal-body .modal-perdida h2 {color:var(--c1) !important;}
.modal-body .modal-beneficios h2 {color:var(--c2) !important;}
.modal-body .modal-eventos h2 {color:var(--c3) !important;}
.modal-body .modal-abandono h2 {color:var(--c4) !important;}
.modal-body .modal-como h2 {color:var(--c5) !important;}
.modal-body .modal-costo h2 {color:var(--c6) !important;}

.modal-body hr {margin:16px 0;}
.modal-body .modal-perdida hr {border-top:1px solid var(--c1) !important;}
.modal-body .modal-beneficios hr {border-top:1px solid var(--c2) !important;}
.modal-body .modal-eventos hr {border-top:1px solid var(--c3) !important;}
.modal-body .modal-abandono hr {border-top:1px solid var(--c4) !important;}
.modal-body .modal-como hr {border-top:1px solid var(--c5) !important;}
.modal-body .modal-costo hr {border-top:1px solid var(--c6) !important;}