/*!
 * Tema institucional Universidad Finis Terrae — efinis
 * Basado en el Manual de Marca 2026 (UFT_Manual-de-Marca.pdf)
 *   - Colores:  Negro #000000 · Blanco #ffffff · Cian Pantone Process #00b7eb
 *   - Tipografía principal (títulos): Clarendon Graphic  -> fallback web: Roboto Slab
 *   - Tipografía secundaria (texto):  Acid Grotesk        -> fallback web: Inter
 * Sobre la base "electric blue" de Chamilo (Bootstrap 3).
 */

/* ----- Fallbacks web (Google Fonts). Debe ir ANTES de cualquier @font-face
   (los @import deben preceder al resto de reglas o el navegador los ignora). ----- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Slab:wght@400;500;700&display=swap');

/* ----- Fuentes de marca auto-hospedadas (licenciadas, tomadas de finis.cl) -----
   Se declaran con los MISMOS nombres de familia que usa el font-stack de abajo
   ('Clarendon Graphic' / 'Acid Grotesk') para que tengan prioridad sobre los
   fallbacks de Google. Archivos en ./fonts/ (ver finis.cl sima-uft). */
@font-face {
  font-family: 'Clarendon Graphic';
  src: url('fonts/Clarendon-Graphic-Thin.otf') format('opentype');
  /* El único archivo es "Thin" (~200-300). Se declara con ese peso (no un rango
     amplio) para que los títulos que pidan más peso (p.ej. 600) sinteticen un
     trazo más grueso, en vez de tomarlo como match exacto y quedar muy delgados
     y frágiles (sobre todo en blanco sobre negro). */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acid Grotesk';
  src: url('fonts/FFF-AcidGrotesk-Light.woff') format('woff');
  /* El archivo es un único peso "Light" (~300). Se declara con ESE peso (y no
     un rango amplio) para que, al pedir pesos mayores (p.ej. enlaces en 600),
     el navegador sintetice un trazo más grueso en vez de tomarlo como match
     exacto y dejarlo igual de delgado. */
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ----- Variables de marca (referencia) -----
   --uft-negro:   #000000
   --uft-blanco:  #ffffff
   --uft-cian:    #00b7eb
   --uft-cian-d:  #0091bd   (cian oscurecido para hover)
   --uft-gris:    #ebebeb   (gris claro secundario)
*/

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* ===== Tipografía ===== */
body {
  margin: 0;
  font-family: 'Acid Grotesk', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
}

h1, h2, h3, h4, h5, h6,
.page-header,
.page-header h1, .page-header h2, .page-header h3,
.panel-title,
.panel-default > .panel-heading,
.breadcrumb,
.productossimple h3 {
  font-family: 'Clarendon Graphic', 'Roboto Slab', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  color: #000000;
  /* Suavizado del render de los títulos serif (incluye títulos de curso
     h4.course-items-title, títulos de sesión y encabezados de sección). */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Enlaces / acento cian ===== */
/* Como en finis.cl: el texto de los enlaces de contenido es oscuro (se lee bien
   aunque Acid Grotesk sea delgada) y el cian de marca se reserva para el hover.
   La cabecera y el menú (texto blanco sobre negro) conservan su color propio por
   reglas más específicas más abajo. */
a {
  color: #1a1a1a;
}
a:hover,
a:focus {
  color: #00b7eb;
}

/* ===== Header (banda superior negra con logo blanco) ===== */
#cm-header,
header {
  background: #000000;
  border-bottom: 3px solid #00b7eb;   /* filete cian institucional */
}
#cm-header .logo {
  padding: 14px 0;
}
#cm-header .logo img {
  max-height: 64px;
  width: auto;
}
/* Texto/iconos auxiliares del header sobre fondo negro.
   Excluimos los .btn (p.ej. el widget de accesibilidad "A A A" y el botón
   de login) para que conserven su color oscuro y sean legibles sobre su
   propio fondo claro. */
#cm-header a:not(.btn) {
  color: #ffffff;
}
#cm-header a:not(.btn):hover {
  color: #00b7eb;
}
/* Widget de accesibilidad (resize de fuente): texto/ícono oscuro y legible */
#cm-header .resize_font .btn {
  color: #1a1a1a;
}
#cm-header .resize_font .btn:hover,
#cm-header .resize_font .btn:focus {
  color: #000000;
  border-color: #00b7eb;
}
/* El menú principal está DENTRO de #cm-header. Reafirmamos su esquema con
   mayor especificidad que la regla de enlaces auxiliares del header, para que
   el texto del menú quede SIEMPRE blanco (legible) en hover y no cian sobre
   el fondo cian del ítem. */
#cm-header .navbar-default .navbar-nav > li > a,
#cm-header .navbar-default .navbar-nav > li > a:hover,
#cm-header .navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
#cm-header .navbar-default .navbar-nav > li > a:hover,
#cm-header .navbar-default .navbar-nav > li > a:focus {
  background-color: #0091bd;
}

/* ===== Menú principal (navbar) negro con activo en cian ===== */
.navbar-default {
  background: #000000;
  border-color: #000000;
  border-radius: 0;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-link:hover {
  /* El texto se mantiene BLANCO en hover (no cian) para que nunca
     desaparezca sobre el fondo cian del ítem activo. */
  color: #ffffff;
  background-color: #0091bd;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #00b7eb;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #0091bd;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #00b7eb;
}
.navbar-default .navbar-toggle {
  border-color: #00b7eb;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #0091bd;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #1a1a1a;
}

/* ===== Breadcrumb: fondo negro con barra cian (mismo look que las barras de
   sección/panel). El "Mis cursos" del portal es en realidad el breadcrumb. ===== */
.breadcrumb {
  background: #000000;
  color: #ffffff !important;
  border-radius: 0;
  border-bottom: none;
  border-left: 4px solid #00b7eb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.breadcrumb li a {
  background: transparent;
  color: #ffffff !important;   /* enlaces del breadcrumb: blancos sobre negro */
}
.breadcrumb li a:hover {
  color: #00b7eb !important;   /* cian de marca solo en hover */
}
.breadcrumb > .active {
  color: #ffffff;            /* página actual: texto blanco */
}
/* El ícono de la casa (y cualquier glifo) del breadcrumb: blanco como el texto
   (antes quedaba oscuro y se perdía sobre el fondo negro). */
.breadcrumb .fa,
.breadcrumb .icon-fa,
.breadcrumb li a .fa,
.breadcrumb i {
  color: #ffffff !important;
}
.breadcrumb li a:hover .fa,
.breadcrumb li a:hover .icon-fa {
  color: #00b7eb !important;
}

.nav li a:hover {
  background: transparent;
}

/* ===== Menú lateral de Red Social (.social-network-menu) =====
   Por defecto los enlaces salían cian y el activo en verde (#1ABC9C) fuera de
   marca. Se dejan negros con hover cian, y el activo en cian institucional. */
.social-network-menu .nav-pills > li > a,
.social-network-menu .nav li a {
  color: #1a1a1a;
}
.social-network-menu .nav-pills > li > a:hover,
.social-network-menu .nav-pills > li > a:focus,
.social-network-menu .nav-pills li.active a,
.social-network-menu .nav li.active a {
  color: #00b7eb;
  background: none;
}

/* ===== Botones primarios en cian institucional ===== */
.btn-primary {
  background-color: #00b7eb;
  border-color: #00b7eb;
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #0091bd;
  border-color: #0091bd;
  color: #ffffff;
}

/* ===== Botones "default": estilo institucional cian (outline) ===== */
.btn-default,
.btn.btn-default {
  background-color: #ffffff;
  border-color: #00b7eb;
  color: #0091bd;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.open > .dropdown-toggle.btn-default {
  background-color: #00b7eb;
  border-color: #0091bd;
  color: #ffffff;
}
/* Las barras de acciones con íconos mantienen borde neutro (no cian) para no
   saturar; el hover sí se pone cian. */
.actions .btn-default,
.toolbar-edit .btn-default,
#cm-header .resize_font .btn-default {
  border-color: #d9d9d9;
  color: #1a1a1a;
  background-color: #ffffff;
}

/* ===== Ventanas modales: acento cian y título serif ===== */
.modal-header {
  border-bottom: 2px solid #00b7eb;
}
.modal-title {
  font-family: 'Clarendon Graphic', 'Roboto Slab', Georgia, serif;
  font-weight: 500;
  color: #000000;
}
.modal-footer {
  border-top-color: #e3e3e3;
}

/* Botones de popups qTip / diálogos jQuery UI (p. ej. detalle de evento de la
   agenda): mismo estilo institucional cian. Se anula el degradado de jQuery UI
   (background-image) y se cubren sus clases de estado. */
.qtip .btn,
.qtip button,
.ui-dialog .ui-dialog-buttonpane button,
.ui-dialog-buttonset .ui-button,
.ui-dialog-buttonset .ui-button.ui-state-default {
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #00b7eb;
  color: #0091bd;
  border-radius: 4px;
  text-shadow: none;
}
.qtip .btn:hover,
.qtip button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover,
.ui-dialog-buttonset .ui-button:hover,
.ui-dialog-buttonset .ui-button.ui-state-hover,
.ui-dialog-buttonset .ui-button.ui-state-active,
.ui-dialog-buttonset .ui-button.ui-state-focus {
  background-color: #00b7eb;
  background-image: none;
  border-color: #0091bd;
  color: #ffffff;
}

/* --- Botones de FullCalendar (Hoy / ‹ › y Mes / Semana / Día / Lista agenda):
   estilo institucional. Activo en cian; resto claro con hover cian. --- */
.fc button,
.fc-button {
  background: #ffffff;
  background-image: none;
  border: 1px solid #cfd6d9;
  color: #333333;
  text-shadow: none;
  box-shadow: none;
}
.fc button:hover,
.fc-button:hover,
.fc-button.fc-state-hover,
.fc-state-hover {
  background: #eaf7fc;
  border-color: #00b7eb;
  color: #00b7eb;
}
.fc-state-active,
.fc-button.fc-state-active,
.fc-state-down,
.fc-button.fc-state-down {
  background: #00b7eb;
  background-image: none;
  border-color: #0091bd;
  color: #ffffff;
}
.fc-state-disabled,
.fc-button.fc-state-disabled {
  opacity: .5;
}

/* ===== Encabezados de sección/panel =====
   Fondo negro + título serif blanco + barra cian vertical de acento a la
   izquierda (mismo look que el banner del curso .section-mycourses .page-header). */
.page-header,
.panel-default > .panel-heading {
  background: #000000;
  color: #ffffff;
  border-bottom: none;
  border-left: 4px solid #00b7eb;   /* barra cian vertical de acento */
}
.page-header {
  padding: 12px 15px;
  margin: 18px 0;
}
/* El título "Mis cursos" del portal es <div class="section-page"><div
   class="page-header">: se cubre explícitamente para ganar especificidad y que
   también tome el fondo negro. */
.section-page > .page-header,
.section-page h3.page-header {
  background: #000000;
  color: #ffffff;
  border-bottom: none;
  border-left: 4px solid #00b7eb;
}
/* Texto y enlaces de las barras de sección: blancos sobre el fondo negro */
.page-header,
.page-header h1, .page-header h2, .page-header h3, .page-header h4,
.page-header a,
.panel-default > .panel-heading,
.panel-default > .panel-heading a,
.panel-default > .panel-heading .panel-title,
.panel-default > .panel-heading .panel-title a {
  color: #ffffff;
}
.page-header a:hover,
.panel-default > .panel-heading a:hover,
.panel-default > .panel-heading .panel-title a:hover {
  color: #00b7eb;
}
/* Título serif blanco sobre negro: con la Clarendon Thin se veía frágil/pixelado.
   Se engrosa (bold sintético desde el archivo Thin), se suaviza el render de
   texto claro sobre oscuro y se le da un leve tracking para más "estilo". */
.page-header h1, .page-header h2, .page-header h3, .page-header h4,
.page-header .panel-title,
.panel-default > .panel-heading,
.panel-default > .panel-heading .panel-title,
.breadcrumb,
.breadcrumb li,
.breadcrumb li a,
.breadcrumb > .active {
  font-weight: 600;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== Footer negro con enlaces cian ===== */
footer.footer,
footer.bgfooter,
.sub-footer {
  background: #000000;
  color: #c8c8c8;
}
footer.footer a,
footer.bgfooter a,
.sub-footer a {
  color: #00b7eb;
}
footer.footer a:hover,
footer.bgfooter a:hover,
.sub-footer a:hover {
  color: #ffffff;
}

/* ===== Interior del curso: fichas de herramientas como tarjetas ===== */
.course-tool {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 20px 10px;
  margin-bottom: 24px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.course-tool:hover {
  border-color: #00b7eb;                 /* acento institucional en hover */
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  transform: translateY(-3px);
}
.course-tool .big_icon img {
  max-height: 80px;
  width: auto;
  filter: grayscale(100%);          /* monocromo por defecto, look más moderno */
  opacity: .92;
  transition: filter .2s ease, opacity .2s ease;
}
.course-tool:hover .big_icon img {
  filter: grayscale(0%);            /* recupera el color al pasar el mouse */
  opacity: 1;
}
/* Etiqueta de la herramienta: oscura, y cian al pasar el mouse */
.course-tool .content a,
.course-tool > a {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: #1a1a1a;
}
.course-tool:hover .content a,
.course-tool:hover > a {
  color: #00b7eb;
}

/* Título de bloque de herramientas ("Creación de contenidos", etc.) */
.title-tools {
  margin: 0;
}

/* ============================================================
   MEJORAS INTERIOR DEL CURSO (1–5)
   ============================================================ */

/* --- (5) Barra superior de íconos de herramientas: toolbar claro --- */
#cm-tools.nav-tools {
  background: #f5f7f8;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 12px 0 18px;
}
#cm-tools #toolshortcuts_horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
#cm-tools .items-icon {
  display: inline-flex;
  padding: 6px;
  border-radius: 6px;
  transition: background .15s ease, transform .15s ease;
}
#cm-tools .items-icon:hover {
  background: #eef2f4;             /* hover gris muy claro, neutro */
  transform: translateY(-1px);
}
/* (2) Íconos de la toolbar en gris suave; se aclaran (nítidos) al hover.
   Sin cambios de color estridentes: solo opacidad. */
#cm-tools .items-icon img {
  filter: grayscale(100%);
  opacity: .5;
  transition: opacity .15s ease;
}
#cm-tools .items-icon:hover img {
  opacity: 1;
}

/* --- (1) Banner del curso: el título del curso sobre franja negra --- */
/* Aplica solo dentro del curso (.section-mycourses) y NO a los encabezados
   de bloque de contenido (#course_tools), que conservan el estilo claro. */
.section-mycourses .page-header {
  background: #000000;
  color: #ffffff;
  border-left: 4px solid #00b7eb;
  border-bottom: none;
  padding: 16px 18px;
  border-radius: 4px;
}
.section-mycourses .page-header,
.section-mycourses .page-header a,
.section-mycourses .page-header h1,
.section-mycourses .page-header h2,
.section-mycourses .page-header h3,
.section-mycourses .page-header h4,
.section-mycourses .page-header .fa {
  color: #ffffff;
}
.section-mycourses .page-header a:hover {
  color: #00b7eb;
}
/* El botón "Cambiar a vista de estudiante" dentro del banner: cian sólido
   (invertido); en hover se oscurece el cian. */
.section-mycourses .page-header .btn-default {
  background: #00b7eb;
  border-color: #00b7eb;
  color: #ffffff;
}
.section-mycourses .page-header .btn-default:hover,
.section-mycourses .page-header .btn-default:focus {
  background: #0091bd;
  border-color: #0091bd;
  color: #ffffff;
}
/* Botón "Cambiar a vista de estudiante/profesor" (wrapper .view-options): va en
   distintas barras según la página (banner, breadcrumb, toolbar). Se apunta al
   contenedor para que sea cian sólido en todas. Cubre btn-default y btn-primary
   (los dos estados del botón). */
.view-options .btn,
.view-options .btn-default,
.view-options .btn-primary {
  background: #00b7eb;
  border-color: #00b7eb;
  color: #ffffff;
}
.view-options .btn:hover,
.view-options .btn:focus,
.view-options .btn-default:hover,
.view-options .btn-default:focus,
.view-options .btn-primary:hover,
.view-options .btn-primary:focus {
  background: #0091bd;
  border-color: #0091bd;
  color: #ffffff;
}
/* Encabezados de bloque DENTRO del curso (p.ej. "Creación de contenidos"):
   mismo look negro + barra cian + título blanco engrosado que el resto. */
.section-mycourses #course_tools .page-header {
  background: #000000;
  border-left: 4px solid #00b7eb;
  border-bottom: none;
  padding: 12px 15px;
  border-radius: 4px;
}
.section-mycourses #course_tools .page-header,
.section-mycourses #course_tools .page-header h1,
.section-mycourses #course_tools .page-header h2,
.section-mycourses #course_tools .page-header h3,
.section-mycourses #course_tools .page-header h4,
.section-mycourses #course_tools .page-header .title-tools {
  color: #ffffff;
  font-weight: 600;
  letter-spacing: .2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- (3) Caja de introducción del curso: suave, con acento cian --- */
.help-course {
  background: #f5fbfe;
  border: 1px dashed #8fd9f2;
  border-left: 4px solid #00b7eb;
  border-radius: 6px;
  padding: 16px 18px;
  color: #444;
}
.help-course .btn,
.help-course a {
  color: #0091bd;
}
/* Contenido real de la introducción (cuando existe) */
.page-course {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: 16px 18px;
}

/* --- (4) Botones de acción del curso (lápiz / ojo / papelera, etc.) --- */
.toolbar-edit .btn-default,
.actions .btn-default {
  border-color: #d9d9d9;
  color: #1a1a1a;
  transition: all .15s ease;
}
.toolbar-edit .btn-default:hover,
.actions .btn-default:hover,
.toolbar-edit .btn-default:focus,
.actions .btn-default:focus {
  border-color: #00b7eb;
  color: #00b7eb;
  background: #f5fbfe;
}

/* --- (2 / opción B) Íconos de herramientas como glifos Font Awesome --- */
.tool-fa-icon {
  display: inline-block;
  line-height: 1;
  color: #1a1a1a;
  transition: color .15s ease, transform .15s ease;
}
/* Tarjetas grandes (activity_big) */
.tool-fa-big {
  font-size: 52px;
}
.course-tool .big_icon {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-tool:hover .tool-fa-icon {
  color: #00b7eb;
}
/* Toolbar superior de íconos (#cm-tools) */
.tool-fa-medium {
  font-size: 22px;
}
#cm-tools .items-icon .tool-fa-icon {
  color: #555555;
}
#cm-tools .items-icon:hover .tool-fa-icon {
  color: #00b7eb;
}
/* Navegación vertical / tamaños pequeños */
.tool-fa-small {
  font-size: 16px;
}
/* Herramientas ocultas/desactivadas */
.tool-fa-disabled {
  opacity: .35;
}

/* Espaciado entre glifos de acción (columna Acciones de las tablas y barras) */
.data_table td .icon-fa,
.actions .icon-fa,
.tools-actions .icon-fa,
.ui-jqgrid td .icon-fa {
  margin: 0 2px;
}
/* Glifo de acción como hijo directo de un enlace (foros y otras herramientas
   que agrupan íconos sin contenedor de tabla): un poco de aire entre ellos. */
a > .icon-fa {
  margin: 0 3px;
}
/* El enlace que envuelve cada glifo de acción: área de click cómoda */
.data_table td a > .icon-fa {
  padding: 3px;
}

/* ============================================================
   PÁGINAS DE HERRAMIENTAS (Documentos, Usuarios, Ejercicios, etc.)
   ============================================================ */

/* --- Barra de acciones (crear, subir, etc.): toolbar claro --- */
.actions {
  background: #f5f7f8;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 16px;
}

/* --- Tablas de datos institucionales --- */
.data_table {
  border-color: #e3e3e3;
}
/* Cabecera: fondo claro, acento cian inferior, títulos serif oscuros */
.data_table > thead > tr > th,
.data_table > thead > tr > td {
  background: #f5f7f8;
  border-bottom: 2px solid #00b7eb;
  color: #000000;
  font-family: 'Clarendon Graphic', 'Roboto Slab', Georgia, serif;
  font-weight: 500;
  vertical-align: middle;
}
.data_table > thead > tr > th a {
  color: #000000;          /* enlaces de ordenamiento: oscuros */
}
.data_table > thead > tr > th a:hover {
  color: #00b7eb;
}
/* Hover de fila en cian muy suave (reemplaza el gris de Bootstrap) */
.data_table.table-hover > tbody > tr:hover,
.data_table > tbody > tr:hover {
  background-color: #eaf7fc;
}

/* --- Tablas jqGrid (Anuncios y otras listas) con el mismo estilo institucional --- */
.ui-jqgrid {
  border: 1px solid #e3e3e3;
}
.ui-jqgrid .ui-jqgrid-labels th.ui-th-column,
.ui-jqgrid .ui-jqgrid-htable th {
  background: #f5f7f8;
  border-bottom: 2px solid #00b7eb;
  color: #000000;
}
.ui-jqgrid .ui-jqgrid-labels th .ui-jqgrid-sortable,
.ui-jqgrid .ui-jqgrid-labels th div {
  font-family: 'Clarendon Graphic', 'Roboto Slab', Georgia, serif;
  font-weight: 500;
  color: #000000;
}
.ui-jqgrid tr.jqgrow > td {
  border-color: #eeeeee;
  padding-top: 7px;
  padding-bottom: 7px;
  vertical-align: middle;
}
.ui-jqgrid tr.ui-state-hover > td,
.ui-jqgrid tr.jqgrow:hover > td {
  background-color: #eaf7fc;
}

/* --- Íconos de acción como glifos Font Awesome (editar, eliminar, etc.) --- */
.icon-fa {
  font-size: 18px;
  vertical-align: middle;
  transition: color .15s ease, opacity .15s ease;
}
.icon-fa-enabled {            /* acción disponible -> texto oscuro (como finis.cl); cian en hover */
  color: #1a1a1a;
}
.icon-fa-disabled {           /* acción no disponible (_na) -> gris */
  color: #9aa0a6;
  cursor: default;
}
.icon-fa-danger {             /* eliminar -> rojo institucional (rubine) */
  color: #e70063;
}
.icon-fa-neutral {            /* tipos (carpeta/archivo) -> gris neutro */
  color: #5a5a5a;
}
.icon-fa-warning {            /* advertencia -> naranja institucional */
  color: #ff6c3d;
}
.icon-fa-success {            /* estado positivo / activo -> verde */
  color: #2fa84f;
}
/* Tamaños de glifo (compuestos para ganar al font-size base de .icon-fa) */
.icon-fa.icon-fa-sz-md { font-size: 28px; }
.icon-fa.icon-fa-sz-lg { font-size: 42px; }
.icon-fa.icon-fa-sz-xl { font-size: 56px; }

/* ============================================================
   TABS, PILLS Y PANELES — acento cian institucional
   ============================================================ */

/* --- Tabs: estilo subrayado cian (limpio, tipo material) --- */
.nav-tabs {
  border-bottom: 1px solid #e3e3e3;
}
.nav-tabs > li > a {
  color: #555555;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-right: 2px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
  background: #f5fbfe;
  border-color: transparent transparent #85ccff;
  color: #00b7eb;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #00b7eb;
  background: transparent;
  border: none;
  border-bottom: 2px solid #00b7eb;
  font-weight: 600;
}
/* Glifos grandes dentro de tabs (editor LP): siguen el color del tab */
.nav-tabs > li > a .icon-fa {
  color: #8a8a8a;
}
.nav-tabs > li.active > a .icon-fa,
.nav-tabs > li > a:hover .icon-fa {
  color: #00b7eb;
}
.tab-content {
  padding-top: 14px;
}

/* --- Pills: el activo en cian sólido (son tipo botón) --- */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #00b7eb;
  color: #ffffff;
}
.nav-pills > li > a {
  color: #0091bd;
}
.nav-pills > li > a:hover {
  color: #00b7eb;
  background-color: #eaf7fc;
}

/* --- Paneles: borde sutil y leve elevación (look card) --- */
.panel {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.panel-default {
  border-color: #e3e3e3;
}

/* --- Menús desplegables de las barras negras (top bar admin navbar-inverse
   y menú principal navbar-default): fondo OSCURO con texto blanco, coherente
   con la barra. Antes salían con fondo blanco y texto blanco (ilegible). --- */
.navbar-inverse .navbar-nav .open .dropdown-menu,
.navbar-default .navbar-nav .open .dropdown-menu {
  background-color: #1a1a1a;
  border-color: #000000;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
  color: #ffffff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #00b7eb;
}
.navbar-inverse .navbar-nav .open .dropdown-menu > .divider,
.navbar-default .navbar-nav .open .dropdown-menu > .divider {
  background-color: #333333;
}
/* El menú está DENTRO de #cm-header, cuya regla de enlaces auxiliares pinta el
   hover en cian (gana por especificidad de id). Forzamos texto blanco en el
   hover del desplegable para que no quede cian sobre el fondo cian. */
#cm-header .navbar-nav .open .dropdown-menu > li > a:hover,
#cm-header .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #ffffff;
  background-color: #00b7eb;
}

/* --- Otros desplegables (fuera de las barras negras): texto oscuro sobre
   blanco, con hover cian. --- */
.dropdown-menu > li > a {
  color: #333333;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #00b7eb;
  background-color: #eaf7fc;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #00b7eb;
  color: #ffffff;
}
a:hover .icon-fa-neutral,
.icon-fa-neutral:hover {
  color: #00b7eb;
}
a:hover .icon-fa-enabled,
.icon-fa-enabled:hover {
  color: #0091bd;
}
a:hover .icon-fa-danger,
.icon-fa-danger:hover {
  color: #c1004f;
}