/* ==========================================================================
   Factura 16 — capa de tema, paleta IDS, variante de barra clara
   ========================================================================== */


/* ==========================================================================
   0. Tipografías
   ========================================================================== */

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-400-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/instrument-sans-400-700-latin.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: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/public-sans-400-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/public-sans-400-700-latin.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;
}


/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
    /* Azules del logotipo. */
    --marca: #1276BE;
    --marca-clara: #2CA6E0;

    /* Acción */
    --accent: var(--marca);
    --deep: #05365c;
    --accent-soft: #DCEDF9;
    --accent-ink: #FFFFFF;

    /* Superficies y bordes, con matiz azulado para acompañar a la marca */
    --ground: #E8ECF1;
    --surface: #FFFFFF;
    --surface-2: #F4F7FB;
    --surface-3: #EBF0F6;
    /* La fila alterna de las tablas. */
    --row-alt: #F6F9FD;
    --line: #CDD7E2;
    --line-soft: #E1E7EF;

    /* Texto */
    --ink: #101822;
    --ink-2: #2A3642;
    --ink-3: #5F6C7B;

    /* Semántica de estado. */
    --ok: #1A6B46;
    --ok-soft: #DCF0E5;
    --info: #4A4FA8;
    --info-soft: #E4E4F6;
    --warn: #8A5A00;
    --warn-soft: #FBEECC;
    --bad: #B3261E;
    --bad-soft: #FBE3E3;

    
    --rail: var(--surface-2);
    --rail-ink: var(--ink-2);
    --rail-ink-soft: var(--ink-3);
    --rail-ink-strong: var(--ink);
    --rail-hover: rgba(0, 0, 0, .06);
    --rail-active: var(--accent-soft);
    --rail-active-ink: var(--deep);
    --rail-line: var(--line);

    /* Añadidos para Bootstrap 3 */
    --ring: rgba(18, 118, 190, .24);
    --ring-bad: rgba(179, 38, 30, .20);
    --shadow: 0 2px 8px rgba(16, 24, 34, .10);

    /* Tipografía: la pila original de Gentelella, la misma que la aplicación usa hoy. */
    --font: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    --display: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans-serif;
    --size: 13.5px;
    --line-height: 1.5;

    /* Formas y medidas */
    --radius: 8px;
    --radius-sm: 6px;
    --control-h: 34px;
    --control-h-sm: 30px;
    --row-h: 32px;
}


/* ==========================================================================
   1. Base
   ========================================================================== */

body {
    font-family: var(--font);
    font-size: var(--size);
    line-height: var(--line-height);
    color: var(--ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gentelella pinta el body de azul marino; no pertenece a esta paleta. */
body {
    background: var(--ground);
}

/* Gentelella usa un selector mas especifico que .right_col; hay que igualarlo. */
body .container.body .right_col {
    background: var(--ground);
    min-height: calc(100vh - 57px);
}

.left_col,
.nav-sm .container.body .col-md-3.left_col,
.nav-md .container.body .col-md-3.left_col {
    min-height: 100vh;
}

/* Franja y borde del riel a la altura del documento: .left_col solo cubre la ventana. */
.nav-md .container.body {
    background:
        linear-gradient(to right, transparent 229px, var(--rail-line) 229px, var(--rail-line) 230px, transparent 230px),
        linear-gradient(to right, var(--rail) 0, var(--rail) 230px, transparent 230px);
}

.nav-sm .container.body {
    background:
        linear-gradient(to right, transparent 69px, var(--rail-line) 69px, var(--rail-line) 70px, transparent 70px),
        linear-gradient(to right, var(--rail) 0, var(--rail) 70px, transparent 70px);
}

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.011em;
}

a {
    color: var(--accent);
}

a:hover,
a:focus {
    color: var(--deep);
}

.text-muted,
small,
.small {
    color: var(--ink-3);
}

/* Seleccion: tinta oscura sobre el tono claro de marca. */
::selection {
    background: var(--marca-clara);
    color: var(--ink);
}

::-moz-selection {
    background: var(--marca-clara);
    color: var(--ink);
}

.table td,
.table th,
.tile h2,
.tile_info,
.count {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}


/* ==========================================================================
   2. Encabezado de página
   ========================================================================== */

.page-title {
    height: auto;
    padding: 6px 0 18px;
}

.page-title .title_left h3,
.page-title .title h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.018em;
    color: var(--ink);
}


/* ==========================================================================
   3. Tarjetas
   ========================================================================== */

.x_panel {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: none;
    padding: 0;
    margin-bottom: 18px;
}

.x_title {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 12px 18px;
    margin: 0;
}

.x_title h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.4;
}

.x_title h2 small {
    color: var(--ink-3);
    font-weight: 400;
    font-family: var(--font);
}

.x_content {
    margin-top: 0;
    padding: 18px;
}

/* Los mosaicos del tablero van sin relleno ni contorno. */
.top_tiles .tile {
    background: transparent;
    padding: 18px;
}

/* --deep, no --accent: sobre el fondo de la aplicacion el acento no llega al minimo. */
.top_tiles .tile a:not(.btn) { color: var(--deep); }


/* ==========================================================================
   4. Formularios
   ========================================================================== */

label,
.control-label {
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 6px;
}

.checkbox label,
.radio label,
.checkbox-inline,
.radio-inline {
    font-weight: 400;
    font-size: var(--size);
    color: var(--ink-2);
    margin-bottom: 0;
}

.form-control {
    font-family: var(--font);
    height: var(--control-h);
    padding: 6px 11px;
    font-size: var(--size);
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
    outline: 0;
}

.form-control::placeholder {
    color: var(--ink-3);
    opacity: 1;
}

.form-control::-webkit-input-placeholder {
    color: var(--ink-3);
}

.form-control:-ms-input-placeholder {
    color: var(--ink-3);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--surface-3);
    color: var(--ink-3);
}

.form-group-sm .form-control,
.input-group-sm>.form-control,
.input-sm {
    height: var(--control-h-sm);
    padding: 4px 9px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

textarea.form-control {
    height: auto;
}

.input-group-addon {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink-3);
    border-radius: var(--radius-sm);
    padding: 6px 11px;
}

.input-group-sm>.input-group-addon {
    padding: 4px 9px;
}

.help-block {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: 5px;
    margin-bottom: 0;
}

.has-error .form-control,
.has-error .input-group-addon,
.has-error .select2-container--default .select2-selection--single {
    border-color: var(--bad);
}

.has-error .form-control:focus {
    border-color: var(--bad);
    box-shadow: 0 0 0 3px var(--ring-bad);
}

.has-error .help-block,
.has-error .control-label,
.has-error label {
    color: var(--bad);
}


/* ==========================================================================
   5. Select2
   ========================================================================== */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: var(--control-h);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
    line-height: 22px;
    padding-top: 5px;
    padding-left: 11px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ink-3);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
}

.select2-dropdown {
    background: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent);
    color: var(--accent-ink);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--accent-soft);
    color: var(--accent);
}


/* ==========================================================================
   6. Botones
   ========================================================================== */

.btn {
    font-family: var(--font);
    border-radius: var(--radius-sm);
    font-weight: 400;
    font-size: var(--size);
    padding: 7px 15px;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-sm,
.btn-group-sm>.btn {
    padding: 5px 12px;
    font-size: 13px;
}

.btn-xs {
    padding: 3px 9px;
    font-size: 12px;
}

/* Una sola acción de mando, en petróleo. */
.btn-success,
.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--deep);
    border-color: var(--deep);
    color: var(--accent-ink);
}

/* Estados compuestos: ":active:hover" gana a ":active". Hay que igualarlos. */
.btn-success.active,
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover,
.btn-primary.active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary.focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
    background-color: var(--deep);
    border-color: var(--deep);
    color: var(--accent-ink);}

.btn-default {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink-2);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--surface-3);
    border-color: var(--line);
    color: var(--ink);
}

/* Estados compuestos: ":active:hover" gana a ":active". Hay que igualarlos. */
.btn-default.active,
.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default.focus,
.open > .dropdown-toggle.btn-default:focus,
.open > .dropdown-toggle.btn-default:hover {
    background-color: var(--surface-3);
    border-color: var(--line);
    color: var(--ink);}

.btn-danger {
    background-color: var(--bad);
    border-color: var(--bad);
    color: var(--accent-ink);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: var(--bad);
    border-color: var(--bad);
    color: var(--accent-ink);
    filter: brightness(.88);
}

/* Estados compuestos: ":active:hover" gana a ":active". Hay que igualarlos. */
.btn-danger.active,
.btn-danger.active.focus,
.btn-danger.active:focus,
.btn-danger.active:hover,
.btn-danger:active.focus,
.btn-danger:active:focus,
.btn-danger:active:hover,
.open > .dropdown-toggle.btn-danger,
.open > .dropdown-toggle.btn-danger.focus,
.open > .dropdown-toggle.btn-danger:focus,
.open > .dropdown-toggle.btn-danger:hover {
    background-color: var(--bad);
    border-color: var(--bad);
    color: var(--accent-ink);
    filter: brightness(.88);}

/* "a.btn-primary" de Gentelella (0,1,1) gana a ".btn-primary" (0,1,0). */
a.btn-primary,
a.btn-success,
a.btn-danger,
a.btn-warning,
a.btn-info {
    color: var(--accent-ink);
}

.btn-link {
    box-shadow: none;
    color: var(--accent);
}

.btn:focus,
.btn:active:focus {
    outline: 0;
    box-shadow: 0 0 0 3px var(--ring);
}


/* ==========================================================================
   7. Tablas
   ========================================================================== */

.table>thead>tr>th {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    border-top: 0;
    padding: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-3);
    vertical-align: middle;

    /* La cabecera puede ocupar dos lineas: hay rotulos mas anchos que su dato. */
    white-space: normal;
}

.table>thead>tr>th a {
    color: inherit;
    text-decoration: none;
}

.table>thead>tr>th a:hover {
    color: var(--accent);
}

.table>tbody>tr>td {
    border-top: 1px solid var(--line-soft);
    height: var(--row-h);
    padding: 4px 6px;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--ink-2);
    vertical-align: middle;
}

/* Escotilla para tablas con texto largo que si debe acomodarse en varias lineas. */
.f16-envolver>tbody>tr>td,
.table>tbody>tr>td.f16-envolver {
    white-space: normal;
    height: auto;
}

.table-condensed>tbody>tr>td {
    padding: 4px 6px;
}

.table-condensed>thead>tr>th {
    padding: 6px;
}

/* Con el renglón fijo, sellos y botones ya no lo empujan. */
.table .label {
    padding: 1px 6px;
    font-size: 10px;
    line-height: 15px;
    vertical-align: middle;
}

.table .btn-xs {
    padding: 1px 5px;
    font-size: 10.5px;
    line-height: 15px;
    vertical-align: middle;
}

.table>tbody>tr>td>.fa,
.table>tbody>tr>td>i {
    vertical-align: middle;
}


.table>tbody>tr>td.text-right,
.table>tfoot>tr>td.text-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.f16-codigo {
    font-size: 10.5px;
    color: var(--ink-3);
}

/* Rayado alterno. El encabezado comparte tono con el renglón sombreado, y se
   distingue por la regla inferior, las versalitas y el peso, no por el fondo. */
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: var(--row-alt);
}

/* Va después del rayado a propósito: misma especificidad, gana por orden. */
.table-hover>tbody>tr:hover {
    background-color: var(--surface-3);
}

/* :not(.btn): un <a class="btn"> dentro de una celda no debe tomar color de enlace. */
.table>tbody>tr>td a:not(.btn) {
    font-weight: 600;
    color: var(--accent);
}

/* Desplazamiento horizontal tambien por encima del punto de corte de Bootstrap. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ==========================================================================
   8. Distintivos de estado
   ========================================================================== */

.label {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.label-success {
    background-color: var(--ok-soft);
    color: var(--ok);
}

.label-danger {
    background-color: var(--bad-soft);
    color: var(--bad);
}

.label-warning {
    background-color: var(--warn-soft);
    color: var(--warn);
}

.label-info,
.label-primary {
    background-color: var(--info-soft);
    color: var(--info);
}

/* --ink-2, no --ink-3: el apagado no llega al minimo sobre este tinte. */
.label-default {
    background-color: var(--surface-3);
    color: var(--ink-2);
}

.badge {
    border-radius: 999px;
    background-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
    padding: 3px 9px;
}


/* ==========================================================================
   9. Paginación
   ========================================================================== */

.pagination>li>a,
.pagination>li>span {
    color: var(--ink-2);
    border-color: var(--line);
    background-color: var(--surface);
    padding: 6px 12px;
    font-weight: 600;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.pagination>li:last-child>a,
.pagination>li:last-child>span {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.pagination>li>a:hover {
    background-color: var(--surface-3);
    border-color: var(--line);
}


/* ==========================================================================
   10. Avisos
   ========================================================================== */

.alert {
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
    padding: 12px 16px;
    box-shadow: none;
}

.alert-success {
    background-color: var(--ok-soft);
    border-color: var(--ok);
    color: var(--ok);
}

.alert-danger {
    background-color: var(--bad-soft);
    border-color: var(--bad);
    color: var(--bad);
}

.alert-warning {
    background-color: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn);
}

.alert-info {
    background-color: var(--info-soft);
    border-color: var(--info);
    color: var(--info);
}


/* ==========================================================================
   11. Barra superior
   ========================================================================== */

.nav_menu {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

.nav_menu nav .nav>li>a {
    color: var(--ink-2);
}

.nav_menu nav .nav>li>a:hover,
.nav_menu nav .nav>li>a:focus {
    background: var(--surface-3);
    color: var(--ink);
    border-radius: var(--radius-sm);
}

.top_nav .nav>li>a h2,
.nav_menu h2.inline {
    font-family: var(--display);
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.011em;
}

.dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 5px;
}

.dropdown-menu>li>a {
    border-radius: 4px;
    padding: 8px 12px;
    color: var(--ink-2);
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: var(--surface-3);
    color: var(--ink);
}

.dropdown-menu .divider {
    background-color: var(--line-soft);
}


/* ==========================================================================
   12. Barra lateral
   ========================================================================== */

.left_col,
.left_col.scroll-view,
.nav_title,
.sidebar-footer,
.menu_section {
    background: var(--rail);
}

.left_col {
    border-right: 1px solid var(--rail-line);
}

.nav_title {
    border-bottom: 1px solid var(--rail-line);
}

.profile {
    border-bottom: 1px solid var(--rail-line);
}

.menu_section h3 {
    color: var(--rail-ink-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
}

.nav.side-menu>li>a,
.nav.side-menu>li>a i {
    color: var(--rail-ink);
    font-weight: 500;
}

.nav.side-menu>li>a:hover {
    color: var(--rail-ink-strong) !important;
    background: var(--rail-hover);
}

/* Sin la barra de 5 px de Gentelella en el elemento activo: basta el fondo. */
.nav.side-menu>li.active,
.nav.side-menu>li.current-page,
.nav.child_menu>li.active,
.nav.child_menu>li.current-page {
    border-right: 0;
}

.nav-sm .nav.child_menu li.active,
.nav-sm .nav.side-menu li.active,
.nav-sm .nav.side-menu li.current-page {
    border-right: 0;
}

.nav.side-menu>li.active>a,
.nav.side-menu>li.current-page>a,
.nav.side-menu>li.active>a i,
.nav.side-menu>li.current-page>a i {
    background: var(--rail-active);
    color: var(--rail-active-ink);
    text-shadow: none;
    box-shadow: none;
}

.nav.child_menu {
    background: var(--rail);
}

.nav.child_menu>li>a {
    color: var(--rail-ink);
    font-size: 12.5px;
}

.nav.child_menu>li>a:hover,
.nav.child_menu>li.active>a,
.nav.child_menu>li.current-page>a {
    color: var(--rail-active-ink);
    background: var(--rail-active);
    border-radius: var(--radius-sm);
}

.nav-md .nav.side-menu>li>a {
    border-radius: var(--radius-sm);
    margin: 0 8px 2px;
}

.nav-md .nav.child_menu>li>a {
    border-radius: var(--radius-sm);
    margin: 0 8px 2px;
}

/* En modo colapsado el submenu flota sobre el contenido. */
.nav-sm .nav.side-menu>li>.nav.child_menu,
.nav-sm ul.nav.child_menu {
    background: var(--rail);
    border: 1px solid var(--rail-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 5px;
}

/* Gentelella mete relleno lateral en cada elemento del submenú flotante y
   una barra verde azulada en el activo. */
.nav-sm ul.nav.child_menu li {
    padding: 0;
}

.nav-sm ul.nav.child_menu>li>a {
    color: var(--rail-ink);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
}

.nav-sm ul.nav.child_menu>li>a:hover,
.nav-sm ul.nav.child_menu>li.active>a,
.nav-sm ul.nav.child_menu>li.current-page>a {
    background: var(--rail-active);
    color: var(--rail-active-ink);
}

.profile_info h2 {
    font-family: var(--font);
    color: var(--rail-ink-strong);
    font-size: 14px;
    font-weight: 600;
}

.profile_info span {
    color: var(--rail-ink-soft);
    font-size: 12px;
}

.sidebar-footer a {
    background: var(--rail-hover);
    color: var(--rail-ink);
}


/* ==========================================================================
   13. Ventanas modales
   ========================================================================== */

.modal-content {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.modal-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line-soft);
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 14px 20px;
}

.modal-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 14px 20px;
}

.modal-body {
    padding: 20px;
}

.modal-title {
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}


/* ==========================================================================
   Utilidad de truncado
   ========================================================================== */

.f16-truncar {
    display: inline-block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}


/* ==========================================================================
   14. Impresión
   ========================================================================== */

@media print {

    .x_panel {
        box-shadow: none;
        border: 1px solid var(--line);
    }

    .x_title,
    .table>thead>tr>th {
        background: transparent;
    }
}


/* ==========================================================================
   15. Blancos escritos a mano en las vistas
   ========================================================================== */

[style*="background: #fff"],
[style*="background:#fff"],
[style*="background-color: white"],
[style*="background-color: #fff"] {
    background-color: var(--surface) !important;
}

/* El contorno del selector de fecha y la raya que cierra el desglose de la
   nomina. Sin esto quedan dos lineas casi blancas sobre fondo oscuro. */
[style*="1px solid #ccc"] {
    border-color: var(--line) !important;
}

[style*="1px solid #dddddd"] {
    border-top-color: var(--line-soft) !important;
}

/* El gris medio del pie del desglose. Sobre blanco se leia; sobre la
   superficie oscura queda apagado de mas. */
[style*="color: #999999"] {
    color: var(--ink-3) !important;
}


/* ==========================================================================
   16. Componentes que el diseno base nunca alcanzo
   ========================================================================== */


/* --- Menu de usuario y barra superior --- */
.navbar-nav .open .dropdown-menu {
    background: var(--surface);
}

.top_nav .nav .open > a,
.top_nav .nav .open > a:focus,
.top_nav .nav .open > a:hover {
    background: var(--surface-3);
}

/* --ink-3: el gris de fabrica no llega al minimo sobre esta superficie. */
.dropdown-header {
    color: var(--ink-3);
}

/* Los dos !important de la barra superior contestan a otros dos !important de
   Gentelella, que fija ahi un gris de su propia paleta. */
.nav.navbar-nav > li > a {
    color: var(--ink-2) !important;
}

a.user-profile {
    color: var(--ink-2) !important;
}


/* --- Pestanas --- */
.nav-tabs {
    border-bottom-color: var(--line);
}

/* --deep, no --accent: el acento no llega al minimo sobre este fondo. */
.nav-tabs > li > a {
    color: var(--deep);
}

.nav-tabs > li > a:hover {
    background-color: var(--surface-2);
    border-color: var(--line-soft) var(--line-soft) var(--line);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    background-color: var(--surface);
    border-color: var(--line);
    border-bottom-color: transparent;
    color: var(--ink);
}

ul.bar_tabs {
    background: var(--surface-2);
    border-bottom-color: var(--line);
}

ul.bar_tabs > li {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--ink-2) !important;
}

ul.bar_tabs > li a {
    background: var(--surface-2);
}

/* La pestana elegida se levanta usando la superficie de la tarjeta, que es el
   plano al que pertenece el contenido de debajo. */
ul.bar_tabs > li.active,
ul.bar_tabs > li.active a {
    background: var(--surface);
    color: var(--ink) !important;
}

ul.bar_tabs > li.active {
    border-right-color: var(--line);
}


/* --- Boton informativo y de aviso --- */
.btn-info {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--accent-ink);
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.btn-info.active.focus,
.btn-info.active:focus,
.btn-info.active:hover,
.btn-info:active.focus,
.btn-info:active:focus,
.btn-info:active:hover,
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-info.focus,
.open > .dropdown-toggle.btn-info:focus,
.open > .dropdown-toggle.btn-info:hover {
    background-color: var(--info);
    border-color: var(--info);
    color: var(--accent-ink);
    filter: brightness(.88);
}

.btn-warning {
    background-color: var(--warn);
    border-color: var(--warn);
    color: var(--accent-ink);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.btn-warning.active.focus,
.btn-warning.active:focus,
.btn-warning.active:hover,
.btn-warning:active.focus,
.btn-warning:active:focus,
.btn-warning:active:hover,
.open > .dropdown-toggle.btn-warning,
.open > .dropdown-toggle.btn-warning.focus,
.open > .dropdown-toggle.btn-warning:focus,
.open > .dropdown-toggle.btn-warning:hover {
    background-color: var(--warn);
    border-color: var(--warn);
    color: var(--accent-ink);
    filter: brightness(.88);
}


/* --- Select2, variante bootstrap --- */
.select2-container--bootstrap .select2-selection {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.select2-container--bootstrap .select2-dropdown {
    background-color: var(--surface);
    border-color: var(--line);
}

.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: var(--ink);
}

.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder,
.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder,
.select2-container--bootstrap .select2-results__option[aria-disabled=true],
.select2-container--bootstrap .select2-results__group,
.select2-container--bootstrap .select2-selection__clear {
    color: var(--ink-3);
}

.select2-container--bootstrap .select2-selection__clear:hover {
    color: var(--ink);
}

.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--ink-3);
}

.select2-container--bootstrap .select2-results__option[aria-selected=true] {
    background-color: var(--accent-soft);
    color: var(--deep);
}

.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent);
    color: var(--accent-ink);
}

.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection {
    border-color: var(--accent);
}

.select2-container--bootstrap.select2-container--disabled .select2-selection {
    background-color: var(--surface-3);
    border-color: var(--line);
}


/* --- Select2, etiquetas del multiple y deshabilitado --- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--accent-soft);
    border-color: var(--line);
    color: var(--deep);
}

/* --ink-2, no --ink-3: el apagado no llega al minimo sobre el tinte de la etiqueta. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--ink-2);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--ink);
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: var(--surface-3);
}


/* --- Calendario de rango de fechas --- */
.daterangepicker {
    background: var(--surface);
    border-color: var(--line);
    box-shadow: var(--shadow);
    color: var(--ink-2);
}

.daterangepicker:before {
    border-bottom-color: var(--line);
}

.daterangepicker:after {
    border-bottom-color: var(--surface);
}

.daterangepicker.dropup:before {
    border-top-color: var(--line);
}

.daterangepicker.dropup:after {
    border-top-color: var(--surface);
}

.daterangepicker .calendar-table {
    background: var(--surface);
    border-color: var(--surface);
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--surface-3);
    color: var(--ink);
}

.daterangepicker td.week,
.daterangepicker th.week,
.daterangepicker td.disabled,
.daterangepicker option.disabled,
.daterangepicker .calendar-time select.disabled {
    color: var(--ink-3);
}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date {
    background-color: var(--surface);
    color: var(--ink-3);
}

.daterangepicker td.in-range {
    background-color: var(--accent-soft);
    color: var(--ink);
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--accent);
    color: var(--accent-ink);
}

.daterangepicker .input-mini {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.daterangepicker .input-mini.active {
    border-color: var(--accent);
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.daterangepicker .ranges li {
    background: var(--surface-2);
    border-color: var(--line);
    color: var(--deep);
}

.daterangepicker .ranges li:hover,
.daterangepicker .ranges li.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}


/* --- Separadores --- */
.ln_solid {
    background-color: transparent;
    border-top-color: var(--line-soft);
    color: transparent;
}

.divider-dashed {
    background-color: transparent;
    border-top: 1px dashed var(--line-soft);
}


/* --- Pantalla de acceso y sobras varias --- */
/* .login va en el <body>: gana a la regla de body y hay que darle el fondo
   del tema, no dejarlo transparente. */
.login {
    background: var(--ground);
}

.login_content {
    background: transparent;
}

/* Aqui el contenido se apoya en --ground, mas oscuro que una tarjeta, y el
   acento y el apagado no llegan al minimo encima. Mismo remedio que en los
   mosaicos del tablero: se sube un escalon. No se toca .help-block, que en
   estado de error ya lleva --bad. */
.login a:not(.btn) {
    color: var(--deep);
}

.login small,
.login .text-muted {
    color: var(--ink-2);
}

.login_content form input[type=text],
.login_content form input[type=email],
.login_content form input[type=password] {
    background-color: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.editor-wrapper {
    background-color: var(--surface);
}

.editor.btn-toolbar {
    background: var(--surface-2);
}

.wizard_horizontal ul.wizard_steps li a,
.wizard_horizontal ul.wizard_steps li:hover,
.wizard_verticle ul.wizard_steps li a,
.wizard_verticle ul.wizard_steps li:hover {
    color: var(--ink-2);
}

.wizard_horizontal ul.wizard_steps li a:before,
.wizard_horizontal ul.wizard_steps li a.disabled .step_no,
.wizard_verticle ul.wizard_steps li a:before,
.wizard_verticle ul.wizard_steps li a.disabled .step_no {
    background: var(--surface-3);
}

.widget_tally_box .btn-group button {
    background-color: var(--surface-3);
    border-color: var(--line);
    color: var(--ink-2);
}

/* ==========================================================================
   17. Rejilla estrecha
   ========================================================================== */

@media (max-width: 1440px) {

    .table>tbody>tr>td,
    .table-condensed>tbody>tr>td {
        font-size: 11px;
        padding: 3px 4px;
    }

    .table>thead>tr>th,
    .table-condensed>thead>tr>th {
        font-size: 9px;
        padding: 5px 4px;
    }

    /* Las dos columnas de contenido libre; el valor completo va en el title. */
    .f16-truncar {
        max-width: 110px;
    }
}

@media (max-width: 1300px) {

    .table>tbody>tr>td,
    .table-condensed>tbody>tr>td {
        padding: 3px 3px;
    }

    .table>thead>tr>th,
    .table-condensed>thead>tr>th {
        padding: 5px 3px;
    }

    .f16-truncar {
        max-width: 90px;
    }
}