/* ==========================================================================
   CIMA · Portal Profesionales — Estilos generales (post-login)
   Paleta unificada con login.css (navy + cyan) para que todo el portal
   se sienta como un mismo producto.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500;600&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Marca CIMA (mismos tokens que login.css) */
  --navy-950:     #0B1530;
  --navy-800:     #152452;
  --navy-700:     #1E3164;
  --navy-600:     #2A4080;

  --cyan-300:     #8FE3F2;
  --cyan-400:     #4FD1E8;
  --cyan-500:     #28B8D6;
  --cyan-600:     #1A9CB8;

  --slate-50:     #F5F7FB;
  --slate-100:    #EBEFF6;
  --slate-200:    #DEE4EF;
  --slate-300:    #C9D1E2;
  --slate-400:    #8B96AC;
  --slate-600:    #565F76;
  --slate-900:    #1B2233;

  --success:      #1FA971;
  --success-bg:   #EAFAF3;
  --success-bd:   #b6ecd4;

  --danger:       #E14A54;
  --danger-bg:    #FDEDEE;
  --danger-bd:    #f6c6c9;

  --warn:         #C98A1A;
  --warn-bg:      #FFF7E6;
  --warn-bd:      #f6e3ad;

  --amber:        #F4AB30;
  --amber-hover:  #e0961a;

  --violet-500:   #7C5CD1;
  --violet-600:   #5F3FB0;

  --radius:       10px;
  --radius-lg:    18px;
  --shadow-sm:    0 1px 3px rgba(11,21,48,.08);
  --shadow-md:    0 10px 28px -12px rgba(11,21,48,.18);
  --shadow-card:  0 22px 50px -24px rgba(11,21,48,.28), 0 4px 14px -6px rgba(11,21,48,.10);

  --font-display: 'Poppins', 'Inter', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--slate-50);
  color: var(--slate-900);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: #fff;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: 0 2px 14px rgba(11,21,48,.25);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}

.navbar img[alt="Logo"] {
  height: 36px;
  width: auto;
  display: block;
}

.cima-navbar-user { gap: 12px; }

.cima-user-chip {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .01em;
}
.cima-user-chip i { color: var(--cyan-300); font-size: 15px; }
.cima-user-chip b { font-weight: 600; color: var(--cyan-300); }

.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-logout:hover {
  background: rgba(225,74,84,.16);
  border-color: rgba(225,74,84,.55);
  color: #fff;
}
.btn-logout:active { transform: translateY(1px); }
.btn-logout:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 2px; }

/* ==========================================================================
   BARRA DE CONTACTO (debajo del navbar)
   ========================================================================== */
.cima-topinfo {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 13.5px;
  color: var(--slate-600);
}
.cima-topinfo i { color: var(--cyan-600); width: 16px; text-align: center; margin-right: 6px; }
.cima-topinfo .fw-semibold { color: var(--slate-900); font-weight: 600; }

/* ==========================================================================
   CONTENIDO CENTRAL
   ========================================================================== */
.cima-main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 60px;
  flex: 1;
}

.cima-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 28px 30px;
  margin-top: 18px;
}

/* ==========================================================================
   BANNER ODONTOLOGÍA (informativo, dentro de la card)
   ========================================================================== */
.cima-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(40,184,214,.07), rgba(30,49,100,.05));
  border: 1px solid var(--slate-200);
  border-left: 4px solid var(--cyan-500);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.cima-banner__icon {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cyan-500);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.cima-banner__body { flex: 1 1 auto; }
.cima-banner__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--navy-950);
  margin-bottom: 4px;
}
.cima-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 10px;
}
.cima-banner__note {
  font-size: 13px;
  color: var(--slate-600);
}
.cima-banner__note b { color: var(--slate-900); }

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill:active { transform: translateY(0); }

.btn-pill--navy {
  background: linear-gradient(135deg, var(--navy-700), var(--navy-950));
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(11,21,48,.55);
}
.btn-pill--amber {
  background: linear-gradient(135deg, var(--amber), var(--amber-hover));
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(244,171,48,.55);
}

/* ==========================================================================
   BUSCADOR
   ========================================================================== */
.cima-search-row { margin-bottom: 20px; }

.cima-search {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--slate-50);
  border: 1.5px solid var(--slate-200);
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
  max-width: 520px;
}
.cima-search:focus-within {
  background: #fff;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(40,184,214,.14);
}
.cima-search__icon {
  flex: 0 0 auto;
  width: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
  font-size: 14px;
}
.cima-search:focus-within .cima-search__icon { color: var(--cyan-600); }
.cima-search input {
  border: none;
  background: transparent;
  flex: 1 1 auto;
  padding: 12px 6px;
  font-size: 14.5px;
  color: var(--slate-900);
  min-width: 0;
}
.cima-search input:focus { outline: none; }
.cima-search input::placeholder { color: var(--slate-400); }
.cima-search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  padding: 0 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #34D399, var(--success));
  cursor: pointer;
  transition: filter .15s ease;
}
.cima-search button:hover { filter: brightness(1.05); }
.cima-search button:focus-visible { outline: 2px solid var(--navy-700); outline-offset: -3px; }
.cima-search button:disabled { cursor: not-allowed; filter: brightness(.92); }

/* ==========================================================================
   TABLA DE ESTUDIOS
   ========================================================================== */
.cima-table-wrap {
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Contenedor que SÍ scrollea horizontalmente. DataTables lo genera él mismo
   envolviendo únicamente la <table> (ver dom: "<'cima-table-scroll't>" en
   el snippet de scripts.js), separado de los controles de largo/paginación
   para que esos no se corran de lugar al hacer scroll. */
.cima-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.cima-table {
  min-width: 760px; /* fuerza scroll en vez de achicar columnas hasta ilegibles */
}

table.cima-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.cima-table thead th {
  background: var(--slate-100);
  color: var(--slate-600);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
  padding: 13px 14px;
  border-bottom: 1px solid var(--slate-200);
  white-space: nowrap;
}

.cima-table tbody td,
.cima-table tbody th {
  padding: 13px 14px;
  border-bottom: 1px solid var(--slate-100);
  color: var(--slate-900);
  vertical-align: middle;
}

.cima-table tbody th { font-weight: 600; color: var(--slate-400); }

.cima-table tbody tr:last-child td,
.cima-table tbody tr:last-child th { border-bottom: none; }

.cima-table tbody tr:hover { background: var(--slate-50); }

/* Botones/links de acción que devuelve DameUrl(): a veces vienen con
   class="btn btn-primary", a veces con btn-success/btn-default, y a veces
   sin ninguna clase (ej. "Descarga ZIP"). Por eso el color no se asigna
   por clase sino por lo que el link efectivamente hace (onclick/target),
   que es estable sin importar qué clase bootstrap le hayan puesto. */
.cima-table tbody td a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: linear-gradient(135deg, var(--slate-400), var(--slate-600));
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(27,34,51,.35);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}
.cima-table tbody td a:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cima-table tbody td a:focus-visible { outline: 2px solid var(--navy-700); outline-offset: 2px; }

/* "Ver Resultados" -> obtenerEnlace(...) : azul, más oscuro que antes */
.cima-table tbody td a[onclick^="obtenerEnlace("] {
  background: linear-gradient(135deg, var(--navy-600), var(--navy-950));
  box-shadow: 0 6px 14px -6px rgba(11,21,48,.55);
}

/* "Descarga ZIP" -> descargar(...) : ambar, mismo tono que el botón de CS3D */
.cima-table tbody td a[onclick^="descargar("] {
  background: linear-gradient(135deg, var(--amber), var(--amber-hover));
  box-shadow: 0 6px 14px -6px rgba(244,171,48,.55);
}

/* "Informe" (target=documentos, caso base sin estado especial) -> violeta */
.cima-table tbody td a[target="documentos"] {
  background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
  box-shadow: 0 6px 14px -6px rgba(95,63,176,.5);
}

/* Estado real: adjunto ya subido -> verde (pisa el violeta de arriba) */
.cima-table tbody td a.btn-success {
  background: linear-gradient(135deg, #34D399, var(--success));
  box-shadow: 0 6px 14px -6px rgba(31,169,113,.5);
}

/* Estado real: todavía pendiente de adjuntar -> neutro, menos prominente */
.cima-table tbody td a.btn-default {
  background: var(--slate-100);
  color: var(--slate-600);
  box-shadow: none;
  border: 1px solid var(--slate-200);
}
.cima-table tbody td a.btn-default:hover { background: var(--slate-200); }

/* ==========================================================================
   DATATABLES — overrides para que se vea nativo del portal
   ========================================================================== */
.dataTables_wrapper { font-size: 13px; color: var(--slate-600); margin-top: 4px; }

.cima-table-toolbar {
  padding: 12px 16px;
}

.dataTables_length label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--slate-600);
  font-weight: 500;
  margin: 0;
}
.dataTables_length select {
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--navy-950);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_length select:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(40,184,214,.15);
}

.dataTables_info {
  padding-top: 10px !important;
  font-size: 13px;
  color: var(--slate-600);
}

.dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  padding: 5px 11px !important;
  margin-left: 3px !important;
  border: 1px solid transparent !important;
  color: var(--slate-600) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
  color: #fff !important;
}
.dataTables_paginate .paginate_button:hover:not(.disabled) {
  background: var(--slate-100) !important;
  border-color: var(--slate-200) !important;
  color: var(--navy-700) !important;
}
.dataTables_paginate .paginate_button.disabled { opacity: .4; }

/* Iconos de orden de columnas: reemplazamos el ícono por defecto de
   DataTables (que no combina con el resto del portal) por carets de
   Font Awesome, ya cargado en todo el sitio. */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  position: relative;
  padding-right: 24px !important;
  background-image: none !important;
  cursor: pointer;
}
table.dataTable thead th.sorting_disabled { cursor: default; }
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--slate-400);
  opacity: .55;
}
table.dataTable thead th.sorting::after { content: "\f0dc"; } /* fa-sort */
table.dataTable thead th.sorting_asc::after { content: "\f0de"; color: var(--navy-700); opacity: 1; } /* fa-sort-up */
table.dataTable thead th.sorting_desc::after { content: "\f0dd"; color: var(--navy-700); opacity: 1; } /* fa-sort-down */
table.dataTable thead th.sorting_disabled::after { content: none; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.cima-footer {
  background: var(--navy-950);
  padding: 18px 24px;
  margin-top: auto;
}
.cima-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.cima-footer-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.cima-footer-item strong { color: #fff; font-weight: 600; }
.cima-footer-item img { border-radius: 4px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .navbar { padding: 0 18px; height: auto; min-height: 60px; flex-wrap: wrap; padding-block: 10px; }
  .cima-topinfo { padding: 14px 16px 0; }
  .cima-main { padding: 14px 16px 40px; }
  .cima-card { padding: 20px 16px 22px; }
  .cima-search { max-width: 100%; }
  .cima-banner { flex-direction: column; }
}

@media (max-width: 480px) {
  .cima-user-chip span { display: none; }
}