/* ============================================================================
   tw-panel.css — Sistema visual UNIFICADO de la Intranet HI (webapp)
   ----------------------------------------------------------------------------
   CSS PURO. Stack: Laravel 5.4 + Blade + AdminLTE 2.4 + FontAwesome 4 + jQuery
   + DataTables. NO usa Tailwind ni ningún framework moderno: esto es legacy.
   Acá va solo lo reusable (tokens, componentes .tw-*, widgets). Lo que usa una
   sola pantalla va en css/modulos/<modulo>.css, linkeado después de este:
       <link rel="stylesheet" href="{{ url('css/tw-panel.css') }}">
       <link rel="stylesheet" href="{{ url('css/modulos/<modulo>.css') }}">
   Vistas modelo: webapp/configuraciones_fisicas/localidades/
       panel_localidades.blade.php · nueva_localidad.blade.php · editar_localidad.blade.php
   Ver skill: intranet-ui.
   ============================================================================ */

:root {
    /* Paleta de marca */
    --hi-verde:      #0b4c59;   /* Principal */
    --hi-verde-dark: #083b45;
    --hi-amarillo:   #EFB539;   /* Alerta / modificación / pendiente */
    --hi-celeste:    #11AB8F;   /* Éxito / activo (turquesa de marca) */
    --hi-azul:       #4D6D7B;   /* Información / neutro (Info GOD) */
    --hi-rojo:       #D6443C;   /* Error / borrar / cancelar */

    /* Alias semánticos */
    --tw-primary:      var(--hi-verde);
    --tw-primary-dark: var(--hi-verde-dark);
    --tw-success:      var(--hi-celeste);
    --tw-warning:      var(--hi-amarillo);
    --tw-info:         var(--hi-azul);
    --tw-danger:       var(--hi-rojo);

    /* Tints claros (fondo/borde/texto de badges y botones soft) */
    --tw-primary-bg: #e7eff1;  --tw-primary-bd: #b9d0d6;  --tw-primary-tx: #0b4c59;
    --tw-success-bg: #cbede6;  --tw-success-bd: #a9e2d7;  --tw-success-tx: #0c7d68;
    --tw-warning-bg: #fbecc6;  --tw-warning-bd: #f3dd9a;  --tw-warning-tx: #8a6410;
    --tw-info-bg:    #dbe3e6;  --tw-info-bd:    #cddce2;  --tw-info-tx:    #4d6d7b;
    --tw-danger-bg:  #f7d3d2;  --tw-danger-bd:  #f1c2bf;  --tw-danger-tx:  #a5312a;

    /* Neutros de estructura */
    --tw-ink:         #3a3f51;
    --tw-ink-soft:    #5a6375;
    --tw-line:        #e0e4ea;
    --tw-line-soft:   #f0f2f5;
    --tw-surface:     #ffffff;
    --tw-surface-alt: #f7f9fc;
}

/* ── Panel ───────────────────────────────────────────────────────────────── */
.tw-panel {
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    overflow: hidden;
}
.tw-panel.tw-panel-form-select { overflow: visible; }
/* Sin el recorte del panel, el fondo del header y del footer taparía las esquinas redondeadas */
.tw-panel.tw-panel-form-select > .tw-panel-header { border-radius: 5px 5px 0 0; }
.tw-panel.tw-panel-form-select > .tw-panel-footer { border-radius: 0 0 5px 5px; }
/* AdminLTE posiciona el .overlay de carga pero no le da position al contenedor */
.tw-panel.overlay-wrapper { position: relative; }

/* ── Header + título (icono grande dentro del panel) ─────────────────────── */
.tw-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e8ecf0;
    background: var(--tw-surface-alt);
    flex-wrap: wrap;
    gap: 10px;
}
.tw-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--tw-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.tw-title small {
    font-size: 12px;
    font-weight: 500;
    color: #9aa0ac;
    margin-left: 4px;
}
.tw-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── Botones de header con slide-reveal (Nuevo / Filtros / Regresar / Guardar)
   Reposo: solo icono. Hover: desliza la palabra.                              */
.tw-btn-hslide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 34px;
    max-width: 34px;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .28s ease, background .15s, color .15s, border-color .15s;
}
.tw-btn-hslide i { flex: 0 0 auto; font-size: 14px; }
.tw-btn-hslide .lbl {
    flex: 0 0 auto;
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    transition: max-width .28s ease, opacity .2s ease, margin-left .2s ease;
}
.tw-btn-hslide:hover { max-width: 140px; text-decoration: none; }
.tw-btn-hslide:hover .lbl { max-width: 100px; opacity: 1; margin-left: 8px; }
/* .wide: para labels de dos palabras (ej. "Nuevo seguimiento") que no entran
   en el ancho por defecto y se cortaban al revelarse. */
.tw-btn-hslide.wide:hover { max-width: 260px; }
.tw-btn-hslide.wide:hover .lbl { max-width: 220px; }
.tw-btn-hslide.primary       { background: var(--tw-primary); color: #fff; border-color: var(--tw-primary); }
.tw-btn-hslide.primary:hover { background: var(--tw-primary-dark); color: #fff; }
.tw-btn-hslide.ghost         { background: #fff; color: var(--tw-ink-soft); border-color: #d0d6df; }
.tw-btn-hslide.ghost:hover,
.tw-btn-hslide.ghost.active   { background: var(--tw-primary-bg); color: var(--tw-primary); border-color: var(--tw-primary); }
.tw-btn-hslide.back          { background: #fff; color: var(--tw-ink-soft); border-color: #d0d6df; }
.tw-btn-hslide.back:hover    { background: var(--tw-primary-bg); color: var(--tw-primary); border-color: var(--tw-primary); }
/* Variantes de color para acciones de header (ej. asignar / quitar rol masivo).
   Mismo slide-reveal; solo cambia el color de marca.                          */
.tw-btn-hslide.success       { background: var(--tw-success); color: #fff; border-color: var(--tw-success); }
.tw-btn-hslide.success:hover { background: var(--tw-success); filter: brightness(.93); color: #fff; }
.tw-btn-hslide.danger        { background: var(--tw-danger); color: #fff; border-color: var(--tw-danger); }
.tw-btn-hslide.danger:hover  { background: var(--tw-danger); filter: brightness(.93); color: #fff; }
.tw-btn-hslide.delete        { background: var(--tw-danger-bg); color: var(--tw-danger); border-color: var(--tw-danger-bd); }
.tw-btn-hslide.delete:hover  { background: var(--tw-danger); color: #fff; border-color: var(--tw-danger); }
.tw-btn-hslide.warn          { background: var(--tw-warning-bg); color: var(--tw-warning-tx); border-color: var(--tw-warning-bd); }
.tw-btn-hslide.warn:hover    { background: var(--tw-warning); color: #5c420a; border-color: var(--tw-warning); }
.tw-btn-hslide.ok            { background: var(--tw-success-bg); color: var(--tw-success-tx); border-color: var(--tw-success-bd); }
.tw-btn-hslide.ok:hover      { background: var(--tw-success); color: #fff; border-color: var(--tw-success); }

/* ── Filtros ─────────────────────────────────────────────────────────────── */
.tw-filters {
    padding: 16px 20px;
    background: var(--tw-surface-alt);
    border-bottom: 1px solid #e8ecf0;
    display: none;
}
.tw-filters.open { display: block; }
.tw-filters-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.tw-filters .form-group { margin: 0; flex: 1; min-width: 200px; }
.tw-filters label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tw-ink-soft);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 5px;
    display: block;
}
.tw-filters .form-control {
    border: 1px solid #c8d3dc;
    border-radius: 4px;
    font-size: 13px;
    height: 34px;
}
.tw-filters .form-control:focus {
    border-color: var(--tw-primary);
    box-shadow: 0 0 0 2px rgba(11,76,89,.15);
}
/* Leyenda opcional debajo de un campo */
.tw-filter-hint { margin-top: 4px; font-size: 11px; color: #9aa0ac; line-height: 1.3; }

/* Footer del filtro — SOLO para filtros server-side (Buscar + Limpiar juntos).
   Filtros tipo DataTable (client-side con "— Todas —") NO llevan este footer.  */
.tw-filters-footer { margin-top: 14px; display: flex; gap: 8px; }
.tw-btn-search {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 16px;
    border: 1px solid var(--tw-primary); border-radius: 4px;
    background: var(--tw-primary); color: #fff;
    font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background .15s;
}
.tw-btn-search:hover { background: var(--tw-primary-dark); color: #fff; text-decoration: none; }
.tw-btn-clear {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 14px;
    border: 1px solid #d0d6df; border-radius: 4px;
    background: #fff; color: var(--tw-ink-soft);
    font-size: 13px; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.tw-btn-clear:hover { background: #f1f3f6; border-color: #b9c1cc; color: var(--tw-ink); text-decoration: none; }

/* ── Botón de acción masiva (texto siempre visible + contador) ────────────────
   Para acciones que se aplican sobre una selección (ej. asignar o quitar N
   empleados). A diferencia de .tw-btn-hslide, la palabra NO se esconde: antes
   de tocar varios registros el usuario tiene que leer qué hace el botón.      */
.tw-btn-action {
    display: inline-flex; align-items: center; gap: 7px;
    height: 32px; padding: 0 14px;
    border: 1px solid transparent; border-radius: 4px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, opacity .15s;
}
.tw-btn-action i { font-size: 13px; }
.tw-btn-action.primary { background: var(--tw-primary); color: #fff; border-color: var(--tw-primary); }
.tw-btn-action.primary:hover:not([disabled]) { background: var(--tw-primary-dark); color: #fff; text-decoration: none; }
.tw-btn-action.danger  { background: var(--tw-danger); color: #fff; border-color: var(--tw-danger); }
.tw-btn-action.danger:hover:not([disabled])  { background: var(--tw-danger); filter: brightness(.93); color: #fff; text-decoration: none; }
.tw-btn-action[disabled] { opacity: .55; cursor: not-allowed; }
/* Contador de seleccionados, embebido en el botón */
.tw-btn-action .tw-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: 10px; background: #fff; font-size: 11px; font-weight: 700;
}
.tw-btn-action.primary .tw-count { color: var(--tw-primary); }
.tw-btn-action.danger  .tw-count { color: var(--tw-danger); }
.tw-btn-action.warn { background: var(--tw-warning); color: #5c420a; border-color: var(--tw-warning); }
.tw-btn-action.warn:hover:not([disabled]) { background: var(--tw-warning); filter: brightness(.94); color: #5c420a; text-decoration: none; }
.tw-btn-action.warn .tw-count { color: var(--tw-warning-tx); }

/* ── Modal con cabecera institucional ────────────────────────────────────────
   Se aplica sobre .modal-content para que el header tome el verde de marca sin
   estilos inline en la vista.                                                 */
.tw-modal .modal-content { border: none; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.20); }
.tw-modal .modal-header { background: var(--tw-primary); color: #fff; border-bottom: none; padding: 15px 20px; }
.tw-modal .modal-header .modal-title { font-size: 16px; font-weight: 600; }
.tw-modal .modal-header .close { color: #fff; opacity: .9; text-shadow: none; }
.tw-modal .modal-header .close:hover { opacity: 1; }
.tw-modal .modal-body { padding: 20px; }
.tw-modal .modal-body label { font-size: 12px; font-weight: 600; color: var(--tw-ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; display: block; }
.tw-modal .modal-body .form-control { border: 1px solid #c8d3dc; border-radius: 4px; font-size: 13px; box-shadow: none; }
.tw-modal .modal-body .form-control:focus { border-color: var(--tw-primary); box-shadow: 0 0 0 2px rgba(11,76,89,.15); }
.tw-modal .modal-footer { padding: 12px 20px; border-top: 1px solid var(--tw-line); background: #fff; }
.tw-modal .modal-footer .btn { border-radius: 4px; font-weight: 600; font-size: 13px; padding: 7px 16px; }
.tw-modal .modal-footer .btn-primary { background: var(--tw-primary); border-color: var(--tw-primary); color: #fff; }
.tw-modal .modal-footer .btn-primary:hover { background: var(--tw-primary-dark); border-color: var(--tw-primary-dark); }
.tw-modal .modal-footer .btn-default { background: #fff; border-color: var(--tw-line); color: var(--tw-ink-soft); }
.tw-modal .modal-footer .btn-default:hover { background: #f1f3f6; border-color: #b9c1cc; }
/* Botón Cancelar del footer, reutilizable. Fuera del .btn-default de Bootstrap:
   se estiliza acá para no repetir el bloque scoped por id en cada vista.       */
.tw-modal .btn-cancelar-modal { background-color: #fff; border: 1px solid #ccc; color: #555; border-radius: 4px; }
.tw-modal .btn-cancelar-modal:hover { background-color: #f5f5f5; border-color: #aaa; }
/* Anchos de modal, sobre .modal-dialog. Evitan el width inline repetido en cada
   vista y dejan los tamaños en dos valores en vez de uno por modal.           */
/* .tw-modal-sm: confirmaciones de una pregunta. El modal-sm de Bootstrap (300px)
   parte el título y el texto en demasiadas líneas. */
.tw-modal-sm { width: 90%; max-width: 440px; }
.tw-modal-md { width: 90%; max-width: 720px; }
.tw-modal-lg { width: 90%; max-width: 900px; }

/* ── Fila del buscador del DataTable (SIEMPRE debajo de los filtros) ──────── */
.tw-search-row {
    padding: 12px 20px;
    border-bottom: 1px solid var(--tw-line-soft);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tw-search-row .dataTables_filter { float: none; margin: 0; }
.tw-search-row .dataTables_filter label {
    margin: 0; font-weight: normal; color: transparent; font-size: 0;
    display: flex; align-items: center;
}
.tw-search-row .dataTables_filter input {
    height: 34px; width: 280px; max-width: 100%;
    padding: 0 12px 0 34px; line-height: 32px; font-size: 13px;
    border: 1px solid #d0d6df; border-radius: 4px; outline: none;
    color: var(--tw-ink);
    transition: border-color .2s, box-shadow .2s;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
}
.tw-search-row .dataTables_filter input::placeholder { color: #aab0bc; }
.tw-search-row .dataTables_filter input:focus {
    border-color: var(--tw-primary);
    box-shadow: 0 0 0 2px rgba(11,76,89,.15);
}

/* Buscador server-side (form POST) en la search-row. Mismo look que el buscador
   del DataTable, pero envía al backend (no filtra en cliente). Para vistas con
   búsqueda + paginación server-side.                                          */
.tw-server-search { display: flex; align-items: center; gap: 8px; margin: 0; }
.tw-server-search input[type="text"] {
    height: 34px; width: 280px; max-width: 100%;
    padding: 0 12px 0 34px; line-height: 32px; font-size: 13px;
    border: 1px solid #d0d6df; border-radius: 4px; outline: none;
    color: var(--tw-ink);
    transition: border-color .2s, box-shadow .2s;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;
}
.tw-server-search input[type="text"]::placeholder { color: #aab0bc; }
.tw-server-search input[type="text"]:focus {
    border-color: var(--tw-primary);
    box-shadow: 0 0 0 2px rgba(11,76,89,.15);
}
/* Variante sin lupa: para inputs de alta/entrada (no búsqueda), ej. agregar permiso. */
.tw-server-search.no-icon input[type="text"] { padding-left: 12px; background-image: none; }

/* ── Chips de columnas (mostrar / ocultar) ───────────────────────────────── */
.tw-col-toggles { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tw-col-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #9aa0ac; margin-right: 2px;
}
.tw-col-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border: 1px solid var(--tw-primary-bd); border-radius: 20px;
    background: var(--tw-primary-bg); color: var(--tw-primary-tx);
    font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.tw-col-chip i { font-size: 11px; }
.tw-col-chip:hover { border-color: var(--tw-primary); }
.tw-col-chip.off { background: #f1f3f6; border-color: #dfe3e9; color: #9aa0ac; }

/* ── Tabla ───────────────────────────────────────────────────────────────── */
.tw-panel .table { margin: 0; }
.tw-panel .table thead th {
    background: #eef2f6; color: var(--tw-ink-soft);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    border-bottom: 2px solid var(--tw-line); padding: 10px 16px; white-space: nowrap;
}
.tw-panel .table tbody td {
    padding: 10px 16px; font-size: 13px; color: var(--tw-ink);
    vertical-align: middle; border-top: 1px solid var(--tw-line-soft);
}
.tw-panel .table tbody tr:hover td { background: var(--tw-surface-alt); } /* neutro, sin tinte verde */
.tw-panel .table tbody tr:last-child td { border-bottom: none; }
.tw-panel table.dataTable td.hidden,
.tw-panel table.dataTable th.hidden { display: none !important; }

/* ── Badge de ID ─────────────────────────────────────────────────────────── */
.tw-badge-id {
    display: inline-block; background: var(--tw-primary-bg); color: var(--tw-primary-tx);
    border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .3px;
}

/* ── Badge de estado (SIN punto, soft-tint, colores unificados) ──────────── */
.tw-badge {
    display: inline-flex; align-items: center;
    border-radius: 20px; padding: 3px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.tw-badge.ok     { background: var(--tw-success-bg); color: var(--tw-success-tx); }
.tw-badge.warn   { background: var(--tw-warning-bg); color: var(--tw-warning-tx); }
.tw-badge.info   { background: var(--tw-info-bg);    color: var(--tw-info-tx); }
.tw-badge.danger { background: var(--tw-danger-bg);  color: var(--tw-danger-tx); }
.tw-badge.muted  { background: #eef0f3;              color: #7a828f; }
/* .primary = verde institucional sólido. Para etiquetas que nombran una entidad
   (una persona, un nodo), no un estado: el soft-tint las dejaba a un paso del
   gris de .muted. */
.tw-badge.primary { background: var(--tw-primary);   color: #fff; }

/* ── Acciones: slide-reveal ──────────────────────────────────────────────────
   Reposo: solo icono, color con opacidad (soft-tint).
   Hover:  se pinta sólido y desliza la palabra.
   La columna Acciones DEBE tener ancho fijo (tw-actions-col + autoWidth:false)
   para que el slide no la agrande/achique.                                     */
.tw-actions { display: flex; align-items: center; }
.tw-actions.slide { gap: 6px; justify-content: flex-end; width: 100%; }
.tw-btn-slide {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; min-width: 32px; max-width: 32px; padding: 0 8px;
    border: 1px solid transparent; border-radius: 5px;
    cursor: pointer; text-decoration: none; overflow: hidden; white-space: nowrap;
    transition: max-width .28s ease, background .15s, color .15s, border-color .15s;
}
.tw-btn-slide i { flex: 0 0 auto; font-size: 13px; }
.tw-btn-slide .lbl {
    flex: 0 0 auto; max-width: 0; opacity: 0; margin-left: 0; overflow: hidden;
    font-size: 12px; font-weight: 600;
    transition: max-width .28s ease, opacity .2s ease, margin-left .2s ease;
}
.tw-btn-slide:hover { max-width: 118px; text-decoration: none; }
.tw-btn-slide:hover .lbl { max-width: 78px; opacity: 1; margin-left: 8px; }
.tw-btn-slide.edit   { background: var(--tw-success-bg); color: var(--tw-success-tx); border-color: var(--tw-success-bd); }
.tw-btn-slide.edit:hover   { background: var(--tw-success); color: #fff; border-color: var(--tw-success); }
.tw-btn-slide.delete { background: var(--tw-danger-bg); color: var(--tw-danger-tx); border-color: var(--tw-danger-bd); }
.tw-btn-slide.delete:hover { background: var(--tw-danger); color: #fff; border-color: var(--tw-danger); }
.tw-btn-slide.warn   { background: var(--tw-warning-bg); color: var(--tw-warning-tx); border-color: var(--tw-warning-bd); }
.tw-btn-slide.warn:hover   { background: var(--tw-warning); color: #5c420a; border-color: var(--tw-warning); }
/* .ok = acción de activar/habilitar (rol success). Mismo color que .edit, nombre
   distinto para no usar la clase de "Editar" en una acción que no lo es.       */
.tw-btn-slide.ok     { background: var(--tw-success-bg); color: var(--tw-success-tx); border-color: var(--tw-success-bd); }
.tw-btn-slide.ok:hover     { background: var(--tw-success); color: #fff; border-color: var(--tw-success); }
/* .info = acción neutra que no modifica nada (ver detalle, abrir gestión). */
.tw-btn-slide.info   { background: var(--tw-info-bg); color: var(--tw-info-tx); border-color: var(--tw-info-bd); }
.tw-btn-slide.info:hover   { background: var(--tw-info); color: #fff; border-color: var(--tw-info); }
/* .primary = el estado ya está activo (ej. el empleado ya es Encargado de
   alguien). Va en verde institucional SÓLIDO, no en tinte claro: en reposo el
   tinte se confundía con el gris de .info y no se distinguía un estado del otro.
   Es la única variante sólida en reposo, y por eso salta a la vista. */
.tw-btn-slide.primary { background: var(--tw-primary); color: #fff; border-color: var(--tw-primary); }
.tw-btn-slide.primary:hover { background: var(--tw-primary-dark); color: #fff; border-color: var(--tw-primary-dark); }
/* Ancho fijo de la columna Acciones cuando se usa el slide */
.tw-actions-col { width: 190px; }
/* Hasta 4 acciones por fila: con 190px el slide de la cuarta desborda la celda */
.tw-actions-col.tw-actions-col-4 { width: 260px; }
td.tw-actions-cell { padding-left: 8px !important; padding-right: 12px !important; }

/* ── Footer del panel ────────────────────────────────────────────────────── */
.tw-panel-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; border-top: 1px solid #e8ecf0; background: var(--tw-surface-alt);
    font-size: 12px; color: #6c757d; flex-wrap: wrap; gap: 8px;
}
.tw-panel-footer .dataTables_info { padding: 0; }
.tw-panel-footer .dataTables_length { margin: 0; }
.tw-panel-footer .dataTables_length label {
    margin: 0; font-weight: normal; display: flex; align-items: center; gap: 6px;
    color: #6c757d; font-size: 12px; white-space: nowrap;
}
.tw-panel-footer .dataTables_length select {
    border: 1px solid #d0d6df; border-radius: 4px; padding: 3px 8px; font-size: 12px; color: var(--tw-ink);
}
.tw-panel-footer .dataTables_paginate { margin: 0; }
.tw-panel-footer .paginate_button { border-radius: 4px !important; padding: 3px 9px !important; font-size: 12px !important; }
.tw-panel-footer .paginate_button.current,
.tw-panel-footer .paginate_button.current:hover {
    background: var(--tw-primary) !important; border-color: var(--tw-primary) !important; color: #fff !important;
}
/* Paginación de Laravel (->links()) para vistas server-side: mismo tamaño
   compacto y color de marca que el paginado del DataTable.                    */
.tw-panel-footer .pagination { margin: 0; display: inline-flex; flex-wrap: wrap; }
.tw-panel-footer .pagination > li > a,
.tw-panel-footer .pagination > li > span {
    padding: 3px 9px; font-size: 12px; color: var(--tw-ink-soft); border-color: #d9dee5;
}
.tw-panel-footer .pagination > .active > a,
.tw-panel-footer .pagination > .active > span,
.tw-panel-footer .pagination > .active > a:hover,
.tw-panel-footer .pagination > .active > span:hover {
    background: var(--tw-primary); border-color: var(--tw-primary); color: #fff;
}
.tw-panel-footer .pagination > .disabled > span { color: #b8bfc9; }

/* ── Formularios (Nuevo / Editar) ────────────────────────────────────────── */
.tw-form-body { padding: 20px 22px; }
.tw-form-body .form-group { margin-bottom: 16px; }
.tw-form-body label {
    font-size: 12px; font-weight: 600; color: var(--tw-ink-soft);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; display: block;
}
.tw-form-body .checkbox label {
    font-size: 13px; font-weight: normal; color: var(--tw-ink);
    text-transform: none; letter-spacing: normal; margin-bottom: 0;
}
.tw-form-body .form-control { border: 1px solid #c8d3dc; border-radius: 4px; font-size: 13px; height: 36px; box-shadow: none; }
.tw-form-body textarea.form-control { height: auto; }
.tw-form-body .form-control:focus { border-color: var(--tw-primary); box-shadow: 0 0 0 2px rgba(11,76,89,.15); }
.tw-form-body .form-control[disabled],
.tw-form-body .form-control:disabled { background: #f2f4f7; color: #8a92a0; }
.tw-form-body .input-group-addon { background: var(--tw-surface-alt); border-color: #c8d3dc; color: var(--tw-ink-soft); }
.tw-form-body .help-block { font-size: 11px; margin-top: 4px; }

/* ── Input de archivo ────────────────────────────────────────────────────────
   El botón que dibuja el navegador dentro de un <input type="file"> viene con el
   gris del sistema operativo y no se parece a nada del panel. No se reemplaza el
   control (eso rompería el name que viaja en el submit): se estila su
   pseudo-elemento, que es lo único que se puede tocar desde CSS.
   Las dos variantes del pseudo-elemento van en reglas SEPARADAS a propósito: si
   se las junta con coma, el navegador que no entiende una descarta la regla
   entera y el botón vuelve al gris.                                           */
.tw-file { display: flex; align-items: center; gap: 8px; }
.tw-file input[type="file"] {
    flex: 1 1 auto; min-width: 0;
    height: 36px; padding: 6px 10px;
    border: 1px solid #c8d3dc; border-radius: 4px;
    background: #fff; font-size: 13px; color: var(--tw-ink-soft);
    line-height: 1.4;
}
.tw-file input[type="file"]:focus {
    outline: none; border-color: var(--tw-primary);
    box-shadow: 0 0 0 2px rgba(11,76,89,.15);
}
.tw-file input[type="file"]::-webkit-file-upload-button {
    height: 24px; padding: 0 12px; margin-right: 10px;
    border: 1px solid var(--tw-primary-bd); border-radius: 4px;
    background: var(--tw-primary-bg); color: var(--tw-primary-tx);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.tw-file input[type="file"]::file-selector-button {
    height: 24px; padding: 0 12px; margin-right: 10px;
    border: 1px solid var(--tw-primary-bd); border-radius: 4px;
    background: var(--tw-primary-bg); color: var(--tw-primary-tx);
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .15s, color .15s;
}
.tw-file input[type="file"]:hover::-webkit-file-upload-button {
    background: var(--tw-primary); color: #fff; border-color: var(--tw-primary);
}
.tw-file input[type="file"]:hover::file-selector-button {
    background: var(--tw-primary); color: #fff; border-color: var(--tw-primary);
}
.tw-file input[type="file"][disabled] { background: #f2f4f7; color: #8a92a0; }

/* Bloque "Archivo actual": el link al archivo ya subido y la acción de borrarlo */
.tw-file-actual {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; font-size: 12px; color: var(--tw-ink-soft);
}
.tw-file-actual a { color: var(--tw-primary); font-weight: 600; }
.tw-file-actual .tw-actions { width: auto; margin-left: auto; }
.tw-form-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 22px; border-top: 1px solid #e8ecf0; background: var(--tw-surface-alt);
}

/* ── Grilla de checkboxes (ej. permisos de un rol) ───────────────────────────
   Columnas responsivas que no cortan un ítem a la mitad.                       */
.tw-checks { columns: 280px 3; column-gap: 24px; }
.tw-checks .checkbox { break-inside: avoid; margin: 0 0 8px; }
.tw-checks .checkbox label { font-weight: normal; color: var(--tw-ink); }
/* ── Acordeón de formulario largo ────────────────────────────────────────────
   Para formularios que no entran de una sola vez (alta y edición de empleado).
   El collapse lo sigue manejando Bootstrap: data-toggle, data-parent, href e
   ids NO se tocan, acá solo cambia la presentación.                           */
.tw-acordeon {
    border: 1px solid var(--tw-line); border-radius: 5px;
    margin-bottom: 12px; overflow: hidden;
}
.tw-acordeon-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 11px 16px; background: var(--tw-surface-alt);
}
.tw-acordeon-head > a,
.tw-acordeon-head .tw-acordeon-link {
    color: var(--tw-primary); font-size: 14px; font-weight: 700;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.tw-acordeon-head > a:hover,
.tw-acordeon-head > a:focus { color: var(--tw-primary-dark); text-decoration: none; }
/* Caret que sigue el estado del collapse de Bootstrap (clase .collapsed) */
.tw-acordeon-head > a::before {
    content: "\f107"; font-family: FontAwesome; font-size: 14px;
    width: 12px; text-align: center;
}
.tw-acordeon-head > a.collapsed::before { content: "\f105"; }
/* La acción del acordeón (agregar configuración) va a la derecha, en la MISMA
   línea que el título. Sin esto hereda el width:100% de .tw-actions.slide y el
   wrap del header la baja a una segunda línea, agrandando esa cabecera y
   dejándola despareja con las que no tienen botón. */
.tw-acordeon-head .tw-actions { width: auto; margin-left: auto; }
.tw-acordeon-body { padding: 14px 16px 2px; }
/* Sub-acordeón (una sección dentro de otra), apenas indentado */
.tw-acordeon-sub { margin: 0 0 12px; }
/* Los acordeones de estas vistas (Datos Personales/Laborales/Documentos y los
   sub de Configuración Lógica/Física) pliegan clickeando TODA la barra del header,
   no solo el texto. El link del collapse crece (flex:1) y con márgenes negativos
   cubre el padding del head (arriba/abajo e izquierda), recuperando el espaciado
   del texto con su propio padding; así toda la barra entra en el área clickeable.
   Los hermanos del link (el "+" de config, o los badges de estado) quedan a la
   derecha como elementos aparte y el link nunca los pisa (los flex items no se
   solapan). */
.tw-acordeon-head > a {
    flex: 1 1 auto;
    margin: -11px 0 -11px -16px;
    padding: 11px 0 11px 16px;
}

/* ── Nota informativa dentro de un formulario ────────────────────────────────
   Aviso corto que orienta al usuario: no es un error ni un estado del registro,
   asi que usa la paleta "info" (--hi-azul) y no compite con los mensajes de
   sesion (callout-danger / callout-success de AdminLTE).                       */
.tw-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--tw-info-bd);
    border-left: 3px solid var(--tw-info);
    border-radius: 4px;
    background: var(--tw-info-bg);
    color: var(--tw-info-tx);
    font-size: 12.5px; line-height: 1.5;
}
.tw-note > i { margin-top: 2px; font-size: 14px; flex: 0 0 auto; }
.tw-note p { margin: 0; }
.tw-note p + p { margin-top: 5px; }
.tw-note strong { color: var(--tw-info-tx); }

/* ── Fieldset: sub-sección dentro de un formulario ───────────────────────────
   Para formularios largos que se agrupan en bloques (ej. el legajo profesional:
   "Datos del Empleado" + "Instituciones y Servicios"). Reemplaza al .box interno
   de AdminLTE, que traía su propia sombra y su propio azul.                     */
.tw-fieldset {
    border: 1px solid var(--tw-line);
    border-radius: 5px;
    margin-bottom: 18px;
    overflow: hidden;
}
.tw-panel.tw-panel-form-select .tw-fieldset { overflow: visible; }
.tw-fieldset-title {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--tw-surface-alt);
    border-bottom: 1px solid var(--tw-line);
    font-size: 13px; font-weight: 700; letter-spacing: .3px;
    color: var(--tw-primary);
}
.tw-fieldset-title small { font-size: 11px; font-weight: 500; color: #9aa0ac; }
.tw-fieldset-body { padding: 16px; }
.tw-fieldset-body > .row:last-child .form-group { margin-bottom: 0; }

/* Fila repetible dentro de un fieldset (ej. cada servicio de una institución).
   Se distingue del fondo sin usar un color nuevo.                              */
.tw-subrow {
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--tw-surface-alt);
    border: 1px solid var(--tw-line);
    border-radius: 4px;
}
.tw-subrow .form-group { margin-bottom: 6px; }

/* Separador entre bloques repetibles */
.tw-subrow-sep { border: 0; border-top: 1px solid var(--tw-line); margin: 14px 0; }

/* Grilla de checkboxes en línea (ej. especialidades de un servicio) */
.tw-checkbox-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.tw-checkbox-grid .tw-checkbox-item { display: flex; align-items: center; gap: 5px; }
.tw-checkbox-grid label {
    margin: 0; font-weight: normal; font-size: 13px;
    text-transform: none; letter-spacing: normal; color: var(--tw-ink);
}
/* Etiqueta de grupo dentro de un fieldset (más chica que un label de formulario) */
.tw-sublabel {
    font-size: 12px; font-weight: 600; color: var(--tw-ink-soft);
    text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; display: block;
}

/* Botón chico dentro de un fieldset (agregar / quitar una fila repetible) */
.tw-btn-mini {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 28px; min-width: 28px; padding: 0 10px;
    border: 1px solid #d0d6df; border-radius: 4px;
    background: #fff; color: var(--tw-ink-soft);
    font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.tw-btn-mini:hover { background: var(--tw-primary-bg); border-color: var(--tw-primary); color: var(--tw-primary); text-decoration: none; }
.tw-btn-mini.danger { background: var(--tw-danger-bg); border-color: var(--tw-danger-bd); color: var(--tw-danger-tx); }
.tw-btn-mini.danger:hover { background: var(--tw-danger); border-color: var(--tw-danger); color: #fff; }
.tw-btn-mini.ok { background: var(--tw-success-bg); border-color: var(--tw-success-bd); color: var(--tw-success-tx); }
.tw-btn-mini.ok:hover { background: var(--tw-success); border-color: var(--tw-success); color: #fff; }

/* ── Lista de pares etiqueta / valor (vistas de detalle, solo lectura) ─────
   Para secciones donde no hay campos editables sino datos y estados, como la
   lista de archivos de un legajo.                                             */
.tw-datalist { display: flex; flex-direction: column; }
.tw-datalist-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--tw-line-soft);
}
.tw-datalist-row:first-child { border-top: 0; }
.tw-datalist-label {
    font-size: 12px; font-weight: 600; color: var(--tw-ink-soft);
    text-transform: uppercase; letter-spacing: .4px; margin: 0;
}
.tw-datalist-value { flex: 0 0 auto; }
/* .long = valor de largo libre (un nombre, un texto declarado): se achica y
   parte en varias líneas en vez de desbordar el contenedor (ej. un modal). */
.tw-datalist-value.long { flex: 0 1 auto; min-width: 0; text-align: right; word-break: break-word; }

/* ── Empty-state (filtro/búsqueda sin resultados) ────────────────────────── */
.tw-panel td.dataTables_empty {
    padding: 40px 16px !important; text-align: center; color: #9aa0ac; font-size: 13px;
}
.tw-panel td.dataTables_empty::before {
    content: "\f002";               /* fa-search (FontAwesome 4) */
    font-family: FontAwesome; display: block; font-size: 28px; color: #ccd2db; margin-bottom: 10px;
}

/* ── Callout (aviso embebido en la página, no flotante) ──────────────────── */
.tw-callout {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; margin-bottom: 14px; border-radius: 6px;
    border: 1px solid var(--tw-line); background: var(--tw-surface-alt);
    font-size: 13px; color: var(--tw-ink);
}
.tw-callout i { font-size: 15px; }
.tw-callout.ok     { background: var(--tw-success-bg); border-color: var(--tw-success-bd); color: var(--tw-success-tx); }
.tw-callout.warn   { background: var(--tw-warning-bg); border-color: var(--tw-warning-bd); color: var(--tw-warning-tx); }
.tw-callout.danger { background: var(--tw-danger-bg);  border-color: var(--tw-danger-bd);  color: var(--tw-danger-tx); }
.tw-callout.info   { background: var(--tw-info-bg);    border-color: var(--tw-info-bd);    color: var(--tw-info-tx); }

/* ── Tarjetas de totales (dashboards / reportes) ─────────────────────────────
   Fila de números dentro del panel, entre los filtros y la tabla. El borde
   izquierdo lleva el rol; .primary es el número principal (sólido).          */
.tw-stats {
    display: flex; flex-wrap: wrap; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--tw-line-soft);
}
.tw-stat {
    flex: 1 1 140px; min-width: 120px; padding: 10px 14px;
    background: var(--tw-surface); border: 1px solid var(--tw-line);
    border-left: 4px solid var(--tw-line); border-radius: 6px;
}
.tw-stat-num   { display: block; font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--tw-ink); }
.tw-stat-label {
    display: block; margin-top: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--tw-ink-soft);
}
.tw-stat.primary { background: var(--tw-primary); border-color: var(--tw-primary); border-left-color: var(--tw-primary-dark); }
.tw-stat.primary .tw-stat-num   { color: #fff; }
.tw-stat.primary .tw-stat-label { color: rgba(255,255,255,.85); }
.tw-stat.ok     { border-left-color: var(--tw-success); }
.tw-stat.warn   { border-left-color: var(--tw-warning); }
.tw-stat.danger { border-left-color: var(--tw-danger); }
.tw-stat.muted  { border-left-color: #b8bfc9; }

/* Texto de ayuda de un bloque (filtros, selección). Más oscuro que
   .tw-filter-hint: son párrafos que hay que poder leer, no una leyenda de campo. */
.tw-help { margin: 0; font-size: 12px; line-height: 1.45; color: var(--tw-ink-soft); }

/* Línea de la cascada de departamentos (public/js/depto-cascada.js): nivel y camino resultante.
   Mismo tono que la ayuda del campo. En rojo, el mismo del span de error de AdminLTE
   (.has-error .help-block), cuando el padre guardado ya no está disponible. */
.tw-cascada-info { margin: 4px 0 8px; font-size: 11px; line-height: 1.45; color: #737373; }
.tw-cascada-info.text-danger { color: #dd4b39; }

/* Select de departamentos dibujado como árbol de explorador (public/js/depto-filtro.js).
   Cada nivel es una columna de 18px: .tw-arbol-col--linea es la │ de un ancestro que sigue,
   --rama el conector ├ y --ultimo el └. Las líneas son bordes, no caracteres de la fuente, así
   que quedan continuas de una opción a la siguiente: el margen negativo estira la fila sobre el
   padding de 6px de cada opción de select2 y el texto lo recupera con su propio padding.
   Usan currentColor con opacidad para leerse también sobre la opción resaltada. */
.tw-arbol { display: flex; align-items: stretch; margin: -6px 0; }
.tw-arbol--raiz { font-weight: 600; }
.tw-arbol-texto { padding: 6px 0 6px 3px; }
.tw-arbol-col { flex: 0 0 18px; position: relative; }
.tw-arbol-col::before,
.tw-arbol-col::after { content: ''; position: absolute; opacity: .55; }
/* │ vertical de lado a lado de la fila */
.tw-arbol-col--linea::before,
.tw-arbol-col--rama::before { left: 8px; top: 0; bottom: 0; border-left: 1.5px solid currentColor; }
/* └ vertical solo hasta la mitad */
.tw-arbol-col--ultimo::before { left: 8px; top: 0; height: 50%; border-left: 1.5px solid currentColor; }
/* ─ horizontal del conector, hasta el texto */
.tw-arbol-col--rama::after,
.tw-arbol-col--ultimo::after { left: 8px; right: 2px; top: 50%; border-top: 1.5px solid currentColor; }

/* Columna de checkbox para selección de filas */
.tw-check-col { width: 40px; text-align: center; }
.tw-panel .table th.tw-check-col,
.tw-panel .table td.tw-check-col { padding-left: 12px; padding-right: 8px; }
.tw-check-col input { margin: 0; width: 15px; height: 15px; cursor: pointer; accent-color: var(--tw-primary); }

/* Tabla con muchas columnas: scrollea dentro de .table-responsive, la página no. */
.tw-table-wide { min-width: 1100px; }
.tw-table-wide td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* ── Aviso sólido (bloque destacado que el usuario tiene que leer) ────────────
   Fondo sólido del rol, admite contenido multilínea (título + párrafos + lista).
   Sin variante = info. Celestito y amarillo llevan texto oscuro: el blanco no
   llega al contraste mínimo sobre esos fondos (2.9:1 y 1.9:1).
   No es .callout ni .alert, así que el auto-dismiss del layout no lo borra.
   Uso:
       <div class="tw-aviso [primary|ok|warn|danger]">
           <i class="fa fa-info-circle"></i>
           <div><span class="tw-aviso-titulo">Título</span><p>Detalle…</p></div>
       </div>                                                                    */
.tw-aviso {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; margin-bottom: 14px; border-radius: 6px;
    background: var(--tw-info); color: #fff;
    font-size: 15px; line-height: 1.5;
}
.tw-aviso > i { font-size: 20px; margin-top: 1px; flex: 0 0 auto; }
.tw-aviso-titulo { display: block; font-size: 16px; font-weight: 600; }
.tw-aviso p  { margin: 8px 0 0; }
.tw-aviso ul { margin: 8px 0 0; }
.tw-aviso.primary { background: var(--tw-primary); }
.tw-aviso.ok      { background: var(--tw-success); color: var(--tw-primary-dark); }
.tw-aviso.warn    { background: var(--tw-warning); color: var(--tw-ink); }
.tw-aviso.danger  { background: var(--tw-danger); }

/* ── Chips de filtro (checkbox oculto + label visible, submit nativo GET) ──── */
.tw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tw-chip-input { position: absolute; opacity: 0; width: 0; height: 0; }
.tw-chip {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; padding: 6px 12px;
    border: 1px solid var(--tw-line); border-radius: 14px;
    background: var(--tw-surface); color: var(--tw-ink-soft);
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.tw-chip:hover { border-color: var(--tw-primary-bd); background: var(--tw-surface-alt); }
.tw-chip-input:focus + .tw-chip { box-shadow: 0 0 0 2px rgba(11,76,89,.2); }
.tw-chip-input:checked + .tw-chip.ok     { background: var(--tw-success); border-color: var(--tw-success); color: #fff; }
.tw-chip-input:checked + .tw-chip.warn   { background: var(--tw-warning); border-color: var(--tw-warning); color: #fff; }
.tw-chip-input:checked + .tw-chip.muted  { background: #5F5E5A;          border-color: #4c4b48;          color: #fff; }
.tw-chip-input:checked + .tw-chip.danger { background: var(--tw-danger);  border-color: var(--tw-danger);  color: #fff; }

/* ── Tarjetas de navegación (hub con icono + label) ─────────────────────────
   Reemplaza las AdminLTE small-boxes en paneles de selección/hub.            */
.tw-nav-cards { display: flex; flex-wrap: wrap; gap: 16px; padding: 20px 22px; }
.tw-nav-card {
    flex: 1; min-width: 200px; max-width: 280px;
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--tw-line); border-radius: 6px;
    background: var(--tw-surface);
    text-decoration: none; color: var(--tw-ink);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.tw-nav-card:hover {
    border-color: var(--tw-primary); box-shadow: 0 3px 10px rgba(11,76,89,.12);
    transform: translateY(-2px); text-decoration: none; color: var(--tw-ink);
}
.tw-nav-card-icon {
    flex: 0 0 auto; width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 20px; color: #fff;
}
.tw-nav-card-body { flex: 1; }
.tw-nav-card-label { font-size: 15px; font-weight: 700; color: var(--tw-ink); }
.tw-nav-card-sub   { font-size: 12px; color: var(--tw-ink-soft); margin-top: 2px; }
.tw-nav-card-arrow { color: var(--tw-ink-soft); font-size: 14px; transition: transform .2s; }
.tw-nav-card:hover .tw-nav-card-arrow { transform: translateX(3px); color: var(--tw-primary); }

/* ── Barra de búsqueda server-side (input + botón submit) ───────────────── */
.tw-search-bar {
    display: flex; gap: 0; margin-top: 14px;
}
.tw-search-bar .form-control {
    border: 1px solid #c8d3dc; border-radius: 4px 0 0 4px;
    font-size: 13px; height: 34px; box-shadow: none;
}
.tw-search-bar .form-control:focus {
    border-color: var(--tw-primary); box-shadow: 0 0 0 2px rgba(11,76,89,.15);
    z-index: 1; position: relative;
}
.tw-search-bar .tw-btn-search {
    border-radius: 0 4px 4px 0; flex: 0 0 auto;
}

/* ── Select2 multi-tag dentro de tw-form-body (paleta de marca) ──────────── */
.tw-form-body .select2-container { width: 100% !important; }
.tw-form-body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--tw-primary); border-color: var(--tw-primary-dark); color: #fff; padding: 2px 8px;
}
.tw-form-body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff; opacity: .85; margin-right: 5px; font-weight: bold;
}
.tw-form-body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; opacity: 1; }
.tw-form-body .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--tw-primary); color: #fff; }
.tw-form-body .select2-container--default .select2-selection--single {
    height: 36px; border: 1px solid #c8d3dc; border-radius: 4px;
}
.tw-form-body .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; }
.tw-form-body .select2-container--default .select2-selection--single .select2-selection__arrow { height: 34px; }
.tw-form-body .select2-container--default .select2-selection--multiple {
    border: 1px solid #c8d3dc; border-radius: 4px; min-height: 36px;
}

/* ── Detalle cards (panel de sistema con borde lateral de estado) ────────── */
.tw-detail-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1200px) { .tw-detail-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tw-detail-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tw-detail-cards { grid-template-columns: 1fr; } }
.tw-detail-card {
    display: flex; flex-direction: column;
    background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,.07); overflow: hidden;
}
.tw-detail-card.muted { background: var(--tw-surface-alt); }
.tw-detail-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--tw-line-soft);
    border-left: 4px solid var(--tw-line);
}
.tw-detail-card-header.ok     { border-left-color: var(--tw-success); }
.tw-detail-card-header.danger { border-left-color: var(--tw-danger); }
.tw-detail-card-header.custom { /* color set via inline style */ }
.tw-detail-card-title {
    font-size: 14px; font-weight: 600; color: var(--tw-ink);
    display: flex; align-items: center; gap: 6px;
}
.tw-detail-card-title i { font-size: 15px; }
.tw-detail-card-body { flex: 1; padding: 12px 14px; font-size: 13px; }
.tw-detail-card-footer {
    padding: 8px 14px; border-top: 1px solid var(--tw-line-soft);
    display: flex; align-items: center; justify-content: flex-end; gap: 6px;
    background: var(--tw-surface-alt);
}

/* ── Leyenda de iconos (footer informativo) ─────────────────────────────── */
.tw-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    font-size: 12px; color: var(--tw-ink-soft);
}
.tw-legend-item { display: inline-flex; align-items: center; gap: 5px; }

/* ── Metadatos de un registro (etiqueta arriba, valor abajo) ─────────────────
   Resumen de solo lectura en la cabecera de un detalle o de una tarjeta (N°,
   solicitante, fecha, lugar). La grilla se acomoda sola al ancho disponible. */
.tw-meta {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 20px;
}
.tw-meta-item { min-width: 0; }
.tw-meta-label {
    display: block; margin-bottom: 2px;
    font-size: 11px; font-weight: 600; color: var(--tw-ink-soft);
    text-transform: uppercase; letter-spacing: .4px;
}
.tw-meta-value { display: block; font-size: 13px; font-weight: 600; color: var(--tw-ink); word-break: break-word; }
.tw-meta-value small { font-weight: 400; color: var(--tw-ink-soft); }

/* ── Diferencia entre lo esperado y lo registrado (ej. enviado vs recibido) ─ */
.tw-diff { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.tw-diff.danger { color: var(--tw-danger-tx); }
.tw-diff.warn   { color: var(--tw-warning-tx); }

/* ── Tabla apilada en celular ────────────────────────────────────────────────
   Debajo de 768px cada fila pasa a ser una tarjeta y cada celda muestra su
   etiqueta desde data-label. Para tablas chicas de detalle, no para listados
   con DataTables.                                                             */
@media (max-width: 767px) {
    .tw-table-stack thead { display: none; }
    .tw-table-stack,
    .tw-table-stack tbody,
    .tw-table-stack tr,
    .tw-table-stack td { display: block; width: 100%; }
    .tw-table-stack tr {
        margin-bottom: 8px; padding: 2px 0;
        border: 1px solid var(--tw-line); border-radius: 5px;
        background: var(--tw-surface);
    }
    .tw-panel .tw-table-stack tbody td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 8px 12px; text-align: right;
        border-top: 1px solid var(--tw-line-soft);
    }
    .tw-panel .tw-table-stack tbody tr td:first-child { border-top: 0; }
    .tw-table-stack td[data-label]::before {
        content: attr(data-label); flex: 0 0 auto; text-align: left;
        font-size: 11px; font-weight: 600; color: var(--tw-ink-soft);
        text-transform: uppercase; letter-spacing: .4px;
    }
}

/* ── Nota / empty-state (contenido fuera de un DataTable) ─────────────────────
   Reemplaza los callout duros de AdminLTE (celeste/amarillo) por la info de
   marca. Para vistas sin tabla (ej. "Mis derivados" de Compliance).           */
.tw-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 16px; margin: 0 0 14px;
    border: 1px solid var(--tw-info-bd); border-radius: 6px;
    background: var(--tw-info-bg); color: var(--tw-info-tx);
    font-size: 14px; line-height: 1.45;
}
.tw-note > i { margin-top: 2px; font-size: 15px; }
.tw-note.tw-empty { justify-content: center; text-align: center; color: var(--tw-ink-soft); }
/* Variantes de color de la nota (info es el default de arriba) */
.tw-note.warn    { border-color: var(--tw-warning-bd); background: var(--tw-warning-bg); color: var(--tw-warning-tx); }
.tw-note.warn > i    { color: var(--tw-warning-tx); }
.tw-note.primary { border-color: var(--tw-primary-bd); background: var(--tw-primary-bg); color: var(--tw-primary-tx); }
.tw-note.primary > i { color: var(--tw-primary-tx); }
.tw-note strong { font-weight: 700; }
.tw-note ul { margin: 8px 0 0; padding-left: 18px; }
.tw-note li { margin-bottom: 6px; }
.tw-note li:last-child { margin-bottom: 0; }

/* ── Título de sección dentro de un formulario largo ─────────────────────────
   Agrupa campos bajo un rótulo claro (reemplaza los <h4> sueltos).            */
.tw-form-section {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--tw-primary);
    text-transform: uppercase; letter-spacing: .4px;
    margin: 24px 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--tw-line);
}
.tw-form-section:first-child { margin-top: 0; }
.tw-form-section small { text-transform: none; font-weight: 500; color: #9aa0ac; letter-spacing: 0; }

/* ── Subtarjeta dentro de un formulario (bloque agrupado con cabecera) ──────── */
.tw-subcard { border: 1px solid var(--tw-line); border-radius: 6px; margin: 8px 0 18px; overflow: hidden; }
.tw-subcard-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--tw-surface-alt); border-bottom: 1px solid var(--tw-line); font-weight: 700; color: var(--tw-primary); font-size: 13px; }
.tw-subcard-body { padding: 14px; }

/* ── Lista de opciones seleccionables (radios) tipo tarjeta ──────────────────
   Cada opción es una fila con borde que se resalta al elegirla.               */
.tw-radio-list { display: flex; flex-direction: column; gap: 10px; }
/* label.tw-radio-opt: gana a `.tw-form-body label` (misma especificidad, definida
   más abajo) para NO heredar el uppercase/letter-spacing/display:block de los
   labels de formulario. El texto de la opción es contenido, no un rótulo. */
label.tw-radio-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; margin: 0;
    border: 1px solid var(--tw-line); border-radius: 6px;
    background: #fff; cursor: pointer;
    font-size: 14px; font-weight: normal; color: var(--tw-ink);
    text-transform: none; letter-spacing: normal; line-height: 1.45;
    transition: border-color .15s, background .15s;
}
label.tw-radio-opt:hover { border-color: var(--tw-primary-bd); background: var(--tw-surface-alt); }
label.tw-radio-opt > input { margin: 2px 0 0; flex: 0 0 auto; }
label.tw-radio-opt > span { flex: 1; min-width: 0; }
label.tw-radio-opt.is-checked { border-color: var(--tw-primary); background: var(--tw-primary-bg); }

/* ── Tarjetas de listado (cuando el ítem no entra en una fila de tabla) ───────
   Cabecera (título + meta) + cuerpo + acciones. Mismos tokens que el panel.    */
.tw-cards { display: flex; flex-direction: column; gap: 12px; }
.tw-card {
    border: 1px solid var(--tw-line); border-radius: 6px;
    background: var(--tw-surface); overflow: hidden;
}
.tw-card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 10px 14px;
    background: var(--tw-surface-alt); border-bottom: 1px solid var(--tw-line);
}
.tw-card-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--tw-primary); display: flex; align-items: center; gap: 8px; }
.tw-card-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.tw-card-body { padding: 12px 14px; }
/* Meta: datos que ayudan a diferenciar una tarjeta de otra (sin datos sensibles) */
.tw-card-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 12px; color: var(--tw-ink-soft); }
.tw-card-meta b { color: var(--tw-ink); font-weight: 600; }
.tw-card-label { display: block; font-size: 11px; font-weight: 700; color: var(--tw-ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.tw-card-text { color: var(--tw-ink); white-space: pre-line; margin: 0 0 12px; }
.tw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Lista de mensajes/respuestas dentro de una tarjeta ──────────────────── */
.tw-msg-list { margin-top: 14px; border-top: 1px solid var(--tw-line-soft); padding-top: 10px; }
.tw-msg-title { font-size: 11px; font-weight: 700; color: var(--tw-ink-soft); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.tw-msg { padding: 7px 0; border-bottom: 1px dashed var(--tw-line); font-size: 13px; color: var(--tw-ink); }
.tw-msg:last-child { border-bottom: none; }
.tw-msg-date { color: #9aa0ac; font-size: 11px; }

/* Variante neutra de .tw-btn-action (acción secundaria, sin peso de color) */
.tw-btn-action.ghost { background: #fff; color: var(--tw-ink-soft); border-color: var(--tw-line); }
.tw-btn-action.ghost:hover:not([disabled]) { background: #f1f3f6; border-color: #b9c1cc; color: var(--tw-ink); text-decoration: none; }

/* ── Contador sobre un botón de header (ej. cantidad de filtros activos) ─────
   Va en un envoltorio FUERA del botón: .tw-btn-hslide recorta con overflow.
   Uso: <span class="tw-count-wrap"><button class="tw-btn-hslide ...">…</button>
        <span class="tw-count-dot">2</span></span>                             */
.tw-count-wrap { position: relative; display: inline-flex; }
.tw-count-dot {
    position: absolute; top: -6px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; border: 2px solid var(--tw-surface);
    background: var(--tw-primary); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    pointer-events: none;
}

/* ── Informes: atajos de período, indicadores, medidor y tarjetas de gráfico ─
   Primer uso: webapp/compliance/informes. Los gráficos son de una sola serie
   en --tw-primary (sin leyenda), a todo el ancho. La cantidad va escrita al
   final de cada barra y el tooltip suma el porcentaje.                       */
.tw-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tw-preset {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border: 1px solid #d0d6df; border-radius: 14px; background: #fff;
    color: var(--tw-ink-soft); font-size: 12px; font-weight: 600; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.tw-preset:hover { background: var(--tw-primary-bg); border-color: var(--tw-primary-bd); color: var(--tw-primary); text-decoration: none; }
.tw-preset.active { background: var(--tw-primary); border-color: var(--tw-primary); color: #fff; }

.tw-report-body { padding: 18px 20px; }
.tw-report-periodo { margin: 0 0 14px; font-size: 13px; color: var(--tw-ink-soft); }
.tw-report-periodo b { color: var(--tw-ink); }

.tw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tw-stat { background: var(--tw-surface); border: 1px solid var(--tw-line); border-radius: 8px; padding: 14px 16px; }
.tw-stat-label { font-size: 13px; font-weight: 600; color: var(--tw-ink-soft); }
.tw-stat-value { margin-top: 4px; font-size: 32px; font-weight: 600; line-height: 1.15; color: var(--tw-ink); }
.tw-stat-sub { margin-top: 4px; font-size: 12px; color: var(--tw-ink-soft); }
/* Medidor: la pista es un tono claro del mismo color que el relleno. */
.tw-meter { height: 8px; margin-top: 10px; border-radius: 4px; background: var(--tw-primary-bg); overflow: hidden; }
.tw-meter-fill { height: 100%; border-radius: 4px; background: var(--tw-primary); }

.tw-chart-card { margin-top: 16px; border: 1px solid var(--tw-line); border-radius: 8px; background: var(--tw-surface); }
.tw-chart-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 10px 16px; border-bottom: 1px solid var(--tw-line);
}
.tw-chart-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--tw-ink); }
.tw-chart-sub { font-size: 12px; color: var(--tw-ink-soft); }
.tw-chart-body { padding: 14px 16px; }
/* El alto lo fija el JS según la cantidad de barras, contando la banda del eje. */
.tw-chart-canvas { position: relative; min-width: 0; }

/* ── Seguimiento visible para el denunciante ────────────────────────────────
   Primer uso: web/compliance (Mis reportes y consulta por código). Cada
   entrada: cabecera (firma + fecha) y el texto con sus párrafos (pre-line).
   El texto va pegado a la etiqueta en el Blade: con pre-line, un salto de
   línea de la indentación se vería como renglón en blanco.               */
.tw-card-section + .tw-card-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--tw-line-soft); }
.tw-seg { padding: 10px 0; border-bottom: 1px dashed var(--tw-line); }
.tw-seg:first-of-type { padding-top: 4px; }
.tw-seg:last-child { border-bottom: none; padding-bottom: 0; }
.tw-seg-head {
    display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-bottom: 4px; font-size: 12px; color: var(--tw-ink-soft);
}
.tw-seg-head b { color: var(--tw-ink); font-weight: 600; }
.tw-seg-text { color: var(--tw-ink); font-size: 13px; line-height: 1.55; white-space: pre-line; word-wrap: break-word; }

/* ── Pestañas de un panel (cada una es una ruta: links, no JS) ──────────────
   Primer uso: webapp/sistemas/contrasenas (Usuarios / Trazabilidad). Van entre
   el header y el contenido, con la activa en el verde de marca.             */
.tw-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    padding: 0 20px; border-bottom: 1px solid var(--tw-line);
    background: var(--tw-surface);
}
.tw-tab {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 11px 14px; margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    font-size: 13px; font-weight: 600; color: var(--tw-ink-soft); text-decoration: none;
    transition: color .15s, border-color .15s;
}
.tw-tab:hover { color: var(--tw-primary); text-decoration: none; }
.tw-tab.active { color: var(--tw-primary); border-bottom-color: var(--tw-primary); }

/* Detalle con tres tarjetas: sin la cuarta columna vacía de .tw-detail-cards. */
.tw-detail-cards.tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tw-detail-cards.tres { grid-template-columns: 1fr; } }

/* Acción que no corresponde: se ve, pero no se usa (el title dice por qué). */
.tw-btn-mini[disabled],
.tw-btn-mini[disabled]:hover {
    opacity: .45; cursor: not-allowed;
    background: #fff; border-color: #d0d6df; color: var(--tw-ink-soft);
}

/* Clave generada que se muestra una sola vez para dictarla (monoespaciada, grande). */
.tw-secreto {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border: 1px dashed var(--tw-primary-bd); border-radius: 6px;
    background: var(--tw-primary-bg);
}
.tw-secreto code {
    background: none; padding: 0; color: var(--tw-primary);
    font-size: 24px; font-weight: 700; letter-spacing: 1px;
}

/* ============================================================================
   Reglas generales y widgets de terceros
   ----------------------------------------------------------------------------
   Aplican a toda vista que cargue este archivo. Los widgets (select2, switch)
   no se pueden acotar a una pantalla: el dropdown de select2 se cuelga del body.
   ============================================================================ */

.tw-form-footer form { margin: 0; }
.tw-header-actions form { margin: 0; }
/* Celular: objetivo táctil de 44px en los botones de header */
@media (max-width: 767px) {
    .tw-header-actions .tw-btn-hslide { height: 44px; min-width: 44px; }
}

/* Select2 dentro de los filtros ocupa todo el ancho de su columna */
.tw-filters .select2-container { width: 100% !important; }
.tw-filters .select2-container--default .select2-selection--single {
    height: 34px; border: 1px solid #c8d3dc; border-radius: 4px;
}
.tw-filters .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 32px; }
.tw-filters .select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }

/* Opciones del dropdown de select2. El dropdown se cuelga del body, por eso hace
   falta !important para ganarle a la especificidad del CSS propio de select2 (que
   por defecto las pinta de azul).

   Dos estados distintos, dos lenguajes distintos:
   - SELECCIONADA es estado, no acción: gris neutro + negrita. Con un segundo verde
     acá el dropdown mostraba dos verdes a la vez y no se leía cuál era cuál.
   - RESALTADA (cursor o teclado) es el foco activo: verde de marca.

   El orden importa. Las dos reglas tienen la misma especificidad y ambas llevan
   !important, así que gana la última: resaltada va DESPUÉS para que, al pasar el
   cursor por encima de la opción ya elegida, se vea el hover y no el estado. */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #eef0f3 !important;
    color: var(--tw-ink) !important;
    font-weight: 600;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--tw-primary) !important;
    color: #fff !important;
    font-weight: 400;
}

/* El toggle de swich-button.css toma el verde de marca al estar encendido */
.switch input:checked + .slider { background-color: var(--tw-success); }