@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

/* =========================================================================
   EMPRESAS.CSS — HOJA DE ESTILOS UNIFICADA
   -------------------------------------------------------------------------
   Línea visual común de todo el control horario:
     · Verde corporativo #77bc1f (hover #63a018)
     · Cabecera: barra verde con logo (izq) · icono + título (centro)
       · usuario o fecha/hora (der)
     · Tarjetas y paneles blancos, borde gris suave, títulos en verde
     · Pensado para TABLET: botones y campos de 44px, letra de 16px en
       los campos (el iPad no hace zoom al tocarlos)
   =========================================================================
   Estructura:
     1) COMPONENTES COMPARTIDOS (ERP_DatosEmpresa / ERP_Trabajador /
        ERP_FichaTrabajador / ERP_Convenio / ERP_Jornada / ERP_Puesto)
        -> .contenido.clientes, .information, .panel-*, .form-grid-*,
           .action-buttons, .btn-custom-*, .alerta-mensaje, etc.
     2) ERP_ControlAcceso.php  (pantalla de fichaje / terminal)
     3) ERP_SolicitarDias.php  (calendario de solicitud de días)
     4) LÍNEA VISUAL UNIFICADA (cabeceras, botones, paneles, tablet...)
        -> Va al final para que tenga prioridad sobre lo anterior.
   ========================================================================= */


/* =========================================================================
   1) COMPONENTES COMPARTIDOS
   ========================================================================= */

/* ─────────────────────────────────────────────────────────
   CONTENEDOR PRINCIPAL
   ───────────────────────────────────────────────────────── */

.contenido.clientes {
    width: 100%;
    max-width: 1100px;
    margin: 20px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────
   MENSAJE DE ÉXITO / ERROR
   ───────────────────────────────────────────────────────── */

.alerta-mensaje {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 15px 20px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    z-index: 99999;
}

.alerta-mensaje i {
    font-size: 22px;
}

.alerta-exito {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #166534;
}

.alerta-exito i {
    color: #16a34a;
}

.alerta-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.alerta-error i {
    color: #dc2626;
}


/* ─────────────────────────────────────────────────────────
   TÍTULO DE SECCIÓN
   ───────────────────────────────────────────────────────── */

.information h3 {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef2f5;
    font-size: 22px;
    font-weight: 600;
    color: #2c3e50;
}


/* ─────────────────────────────────────────────────────────
   ACORDEÓN
   ───────────────────────────────────────────────────────── */

.panel-group .panel {
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s ease-in-out;
}

.panel-group .panel:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.panel-default>.panel-heading {
    padding: 0;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f4f8;
}

.panel-default>.panel-heading a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: #334155;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.panel-default>.panel-heading a:hover {
    background-color: #f8fafc;
    color: #1e293b;
}

.panel-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
}

/* Icono izquierdo */
.panel-title i.panel-icon {
    width: 20px;
    color: #64748b;
    font-size: 16px;
    text-align: center;
    transform: none !important;
}

/* Flecha derecha */
.panel-title i.fa-chevron-down {
    margin-left: auto;
    color: #94a3b8;
    font-size: 13px;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}.panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
.panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down {
    transform: rotate(180deg);
}

.panel-body {
    padding: 24px;
    background-color: #ffffff;
}


/* ─────────────────────────────────────────────────────────
   GRIDS DE CAMPOS
   ───────────────────────────────────────────────────────── */

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 24px;
}

.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px 20px;
}

.dual_input {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}


/* ─────────────────────────────────────────────────────────
   INPUTS
   ───────────────────────────────────────────────────────── */

.form-control,
.information input[type="text"],
.information input[type="number"],
.information input[type="date"],
.information input[type="time"],
.information select,
.information textarea {
    width: 100%;
    padding: 9px 13px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus,
.information input:focus,
.information select:focus,
.information textarea:focus {
    border-color: #77bc1f;
    box-shadow: 0 0 0 3px rgba(119, 188, 31, 0.18);
    outline: none;
}

.information label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}


/* ─────────────────────────────────────────────────────────
   TABLAS (listados y horarios)
   ───────────────────────────────────────────────────────── */

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.table-responsive .table {
    width: 100%;
    border-collapse: collapse;
}

.table-responsive .table th,
.table-responsive .table td {
    padding: 10px;
    border: 1px solid #e2e8f0;
    font-size: 13px;
    vertical-align: middle;
}

.table-responsive .table thead th {
    background: #f8fafc;
    color: #475569;
    text-align: left;
}


/* ─────────────────────────────────────────────────────────
   LOGOTIPO / PREVISUALIZACIÓN DE ARCHIVO
   ───────────────────────────────────────────────────────── */

.logo-preview-box {
    display: inline-block;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
}


/* ─────────────────────────────────────────────────────────
   LISTA DE ARCHIVOS PDF (contratos / procesos)
   ───────────────────────────────────────────────────────── */

.archivo-pdf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #ffffff;
}

.archivo-pdf-nombre {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.archivo-pdf-nombre i {
    color: #dc2626;
    font-size: 20px;
}

.archivo-pdf-nombre span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sin-archivos {
    padding: 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    color: #64748b;
}


/* ─────────────────────────────────────────────────────────
   BOTÓN ELIMINAR DIRECCIÓN (ERP_DatosEmpresa)
   ───────────────────────────────────────────────────────── */

.btn-eliminar-dir {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-eliminar-dir:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}


/* ─────────────────────────────────────────────────────────
   BOTONERA PRINCIPAL (Guardar / Volver / Eliminar)
   Usada por: ERP_DatosEmpresa, ERP_Trabajador, ERP_FichaTrabajador,
              ERP_Convenio, ERP_Jornada, ERP_Puesto
   ───────────────────────────────────────────────────────── */

.action-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.btn-custom-submit {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.btn-custom-submit:hover {
    background-color: #1d4ed8;
}

.btn-custom-eliminar {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 24px;
    background-color: #dc2626;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.btn-custom-eliminar:hover {
    background-color: #b91c1c;
}

/* Variante pequeña de eliminar (dentro de listas de archivos) */
.btn-custom-eliminar.btn-eliminar-sm {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
}

.btn-custom-volver {
    display: inline-flex;
    align-items: center;
}

.btn-custom-volver a,
.btn-custom-volver input,
.btn-custom-volver button {
    height: 42px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 20px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.btn-custom-volver a:hover,
.btn-custom-volver input:hover,
.btn-custom-volver button:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Botón de icono "Ver PDF" dentro de listas de archivos */
.btn-icon-ver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    background-color: #2563eb;
    color: #ffffff !important;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.btn-icon-ver:hover {
    background-color: #1d4ed8;
}

/* Botón de icono "Editar" dentro de tablas de listado */
.btn-icon-editar {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-icon-editar:hover {
    background-color: #1d4ed8;
}


/* ─────────────────────────────────────────────────────────
   BADGE (contador de direcciones adicionales, etc.)
   ───────────────────────────────────────────────────────── */

.badge-count {
    padding: 3px 8px;
    background-color: #e2e8f0;
    color: #475569;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}


/* ─────────────────────────────────────────────────────────
   CAMPOS DE SOLO LECTURA (ficha de trabajador, id "formulario-datos")
   ───────────────────────────────────────────────────────── */

#formulario-datos input:not([name="pwd"]):not([type="hidden"]):not([type="submit"]),
#formulario-datos textarea {
    background-color: #f8fafc !important;
    color: #475569 !important;
    cursor: default !important;
    pointer-events: none !important;
}

#formulario-datos select {
    background-color: #f8fafc !important;
    color: #475569 !important;
    cursor: default !important;
    pointer-events: none !important;
}

#formulario-datos input[name="pwd"] {
    background-color: #ffffff !important;
    color: #111827 !important;
    cursor: text !important;
    pointer-events: auto !important;
}



/* =========================================================================
   2) ERP_ControlAcceso.php  (pantalla de fichaje / terminal)
   ========================================================================= */

/* ─────────────────────────────────────────────────────────
   BOTÓN VOLVER
   ───────────────────────────────────────────────────────── */

.ca-volver-abajo {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.ca-volver-abajo .et-volver-form {
    margin: 0;
}

.ca-btn-volver {
    display: inline-block;
    background-color: #6c757d;
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ca-btn-volver:hover {
    background-color: #5a6268;
}

.ca-btn-volver:active {
    background-color: #4e555b;
}


/* ─────────────────────────────────────────────────────────
   WRAPPER PRINCIPAL
   ───────────────────────────────────────────────────────── */

.ca-wrapper {
    margin: 20px;
    border: 1.5px solid #77bc1f;
    border-radius: 12px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────
   CABECERA
   ───────────────────────────────────────────────────────── */

.ca-header {
    background: #77bc1f;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ca-header-logo {
    max-height: 120px;
    padding: 5px;
    border-radius: 4px;
}

.ca-title-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ca-title-block h1 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
}

.ca-title-block p {
    margin: 5px 0 0;
    padding: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
}

.ca-datetime {
    flex-shrink: 0;
    text-align: right;
    color: #ffffff;
}

.ca-datetime .ca-fecha {
    font-size: 13px;
    opacity: 0.9;
}

.ca-datetime .ca-reloj {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────────────────────────────
   CUERPO
   ───────────────────────────────────────────────────────── */

.ca-body {
    background: #f9f9f9;
    padding: 20px;
}

.ca-sublabel {
    margin-bottom: 14px;
    font-size: 13px;
    color: #666666;
}


/* ─────────────────────────────────────────────────────────
   CUADRÍCULA RESPONSIVE
   ───────────────────────────────────────────────────────── */

.ca-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}


/* ─────────────────────────────────────────────────────────
   TARJETA USUARIO
   ───────────────────────────────────────────────────────── */

.ca-card {
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 16px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.ca-card:hover {
    border-color: #77bc1f;
    background: #f2fae8;
}


/* ─────────────────────────────────────────────────────────
   HORARIO
   ───────────────────────────────────────────────────────── */

.ca-horario {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: #4a8c0f;
    font-weight: 600;
    text-align: center;
}

.ca-horario-turno {
    background: #f2fae8;
    border: 1px solid #cdeaa5;
    border-radius: 6px;
    padding: 2px 8px;
    white-space: nowrap;
}

.ca-horario-vacio {
    font-size: 10px;
    color: #999999;
    font-style: italic;
}


/* ─────────────────────────────────────────────────────────
   AVATAR
   ───────────────────────────────────────────────────────── */

.ca-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f7d4;
    border: 1.5px solid #77bc1f;
    font-size: 15px;
    font-weight: bold;
    color: #4a8c0f;
}


/* ─────────────────────────────────────────────────────────
   NOMBRE
   ───────────────────────────────────────────────────────── */

.ca-nombre {
    font-size: 12px;
    font-weight: 600;
    color: #333333;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}


/* ─────────────────────────────────────────────────────────
   BOTÓN
   ───────────────────────────────────────────────────────── */

.ca-btn {
    width: 100%;
    background: #77bc1f;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 5px 12px;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ca-btn:hover {
    background: #63a018;
}

.ca-btn:active {
    transform: scale(0.97);
}


/* ─────────────────────────────────────────────────────────
   MODAL CONTRASEÑA
   ───────────────────────────────────────────────────────── */

.ca-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9999;
}

.ca-overlay.activo {
    display: flex;
}

.ca-modal {
    width: 320px;
    max-width: 90vw;
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
}

.ca-modal-avatar {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f7d4;
    border: 2px solid #77bc1f;
    font-size: 20px;
    font-weight: bold;
    color: #4a8c0f;
}

.ca-modal h2 {
    margin-bottom: 4px;
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: #333333;
}

.ca-modal p {
    margin-bottom: 18px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #888888;
}


/* ─────────────────────────────────────────────────────────
   CONTRASEÑA + BOTÓN OJO
   ───────────────────────────────────────────────────────── */

.ca-modal-password-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.ca-modal-password-wrapper input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 52px;
    margin: 0;
    padding: 10px 14px;
    border: 1.5px solid #dddddd;
    border-radius: 8px;
    outline: none;
    font-family: Arial, sans-serif;
    font-size: 20px;
    letter-spacing: 6px;
    text-align: center;
    box-sizing: border-box;
}

.ca-modal-password-wrapper input:focus {
    border-color: #77bc1f;
}

.ca-modal-toggle-pass {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #999999;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
}

#ca-toggle-pass-icon {
    display: block;
    font-size: 20px;
    line-height: 1;
}


/* ─────────────────────────────────────────────────────────
   ERROR MODAL
   ───────────────────────────────────────────────────────── */

.ca-modal-error {
    min-height: 18px;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #c0392b;
}


/* ─────────────────────────────────────────────────────────
   BOTONES MODAL
   ───────────────────────────────────────────────────────── */

.ca-modal-btns {
    display: flex;
    gap: 10px;
}

.ca-modal-btns button {
    flex: 1;
    padding: 9px;
    border: none;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ca-btn-cancelar {
    background: #f0f0f0;
    color: #555555;
}

.ca-btn-cancelar:hover {
    background: #e0e0e0;
}

.ca-btn-confirmar {
    background: #77bc1f;
    color: #ffffff;
}

.ca-btn-confirmar:hover {
    background: #63a018;
}


/* ─────────────────────────────────────────────────────────
   VISTAS DE ESTADO
   ───────────────────────────────────────────────────────── */

.ca-estado-container-centered {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ca-estado-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 20px;
    border: 1.5px solid #77bc1f;
    border-radius: 12px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.ca-estado-header {
    background: #77bc1f;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ca-estado-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff !important;
}

.ca-estado-body {
    background: #f9f9f9;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.ca-estado-usuario {
    margin-bottom: 4px;
    font-size: 14px;
    color: #555555;
}

.ca-estado-btn {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.ca-estado-btn.verde {
    background: #77bc1f;
    color: #ffffff;
}

.ca-estado-btn.verde:hover {
    background: #63a018;
}

.ca-estado-btn.rojo {
    background: #e74c3c;
    color: #ffffff;
}

.ca-estado-btn.rojo:hover {
    background: #c0392b;
}

.ca-estado-btn.naranja {
    background: #e67e22;
    color: #ffffff;
}

.ca-estado-btn.naranja:hover {
    background: #d35400;
}

.ca-estado-btn.azul {
    background: #2980b9;
    color: #ffffff;
}

.ca-estado-btn.azul:hover {
    background: #21618c;
}


/* ─────────────────────────────────────────────────────────
   TOASTS / ALERTAS
   ───────────────────────────────────────────────────────── */

#ca-toast-container {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: none;
}

.ca-toast {
    position: relative;
    width: 340px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 28px 24px;
    background: #ffffff;
    border-top: 5px solid #cccccc;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.ca-toast.activo {
    opacity: 1;
    transform: scale(1);
}

.ca-toast-exito {
    border-top-color: #77bc1f;
}

.ca-toast-error {
    border-top-color: #e74c3c;
}

.ca-toast-icono {
    font-size: 34px;
    line-height: 1;
}

.ca-toast-texto {
    line-height: 1.5;
}

.ca-toast-cerrar {
    position: absolute;
    top: 8px;
    right: 12px;
    padding: 4px;
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #aaaaaa;
    cursor: pointer;
}

.ca-toast-cerrar:hover {
    color: #333333;
}


/* ─────────────────────────────────────────────────────────
   LEYENDA
   ───────────────────────────────────────────────────────── */

.et-leyenda {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #555555;
}

.et-leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.et-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.et-dot.verde {
    background: #1e8e3e;   /* verde más oscuro y saturado */
}

.et-dot.amarillo {
    background: #f9c74f;   /* amarillo cálido, muy claro */
}

.et-dot.rojo {
    background: #d93025;   /* rojo más oscuro, se aleja del verde */
}

.et-dot.azul {
    background: #1a73e8;   /* azul de verdad, no aquamarine */
}

.et-dot.gris {
    background: #9ca3af;   /* gris neutro */
}

.et-dot.violeta {
    background: #7b2ff7;   /* violeta bien saturado */
}



/* ─────────────────────────────────────────────────────────
   COLORES TARJETAS
   ───────────────────────────────────────────────────────── */

.ca-card.et-verde {
    border-color: #1e8e3e;
}

.ca-card.et-amarillo {
    border-color: #f9c74f;
}

.ca-card.et-rojo {
    border-color: #d93025;
}

.ca-card.et-azul {
    border-color: #1a73e8;
    background-color: #00b7ffd9;
}

.ca-card.et-gris {
    border-color: #9ca3af;
}

.ca-card.et-violeta {
    border-color: #7b2ff7;
}



/* ─────────────────────────────────────────────────────────
   COLORES AVATAR
   ───────────────────────────────────────────────────────── */

.ca-avatar.et-verde {
    background: #e8f7d4;
    border-color: #1e8e3e;
    color: #1e8e3e;
}

.ca-avatar.et-amarillo {
    background: #f9c74f;
    border-color: #6b5900;
    color: #6b5900;
}

.ca-avatar.et-rojo {
    background: #fadbd8;
    border-color: #d93025;
    color: #a93226;
}

.ca-avatar.et-azul {
    background: #d6f3ff;
    border-color: #1a73e8;
    color: #1a73e8;
}

.ca-avatar.et-gris {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #4b5563;
}

.ca-avatar.et-violeta {
    background: #efe6ff;
    border-color: #7b2ff7;
    color: #7b2ff7;
}



/* ─────────────────────────────────────────────────────────
   RESPONSIVE CONTROL ACCESO
   ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .ca-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ca-header {
        flex-direction: column;
        padding: 16px;
        gap: 12px;
    }

    .ca-title-block {
        order: 1;
    }

    .ca-datetime {
        order: 2;
        width: 100%;
        padding-top: 8px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    .ca-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .ca-wrapper {
        margin: 10px;
    }

    .ca-header-logo {
        max-height: 90px;
    }

    .ca-title-block h1 {
        font-size: 16px;
    }

    .ca-datetime .ca-reloj {
        font-size: 20px;
    }

    .ca-body {
        padding: 12px;
    }

    .ca-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ca-card {
        flex-direction: row;
        justify-content: space-between;
        padding: 12px;
        gap: 12px;
        text-align: left;
    }

    .ca-nombre {
        flex: 1;
        text-align: left;
    }

    .ca-btn {
        width: auto;
        padding: 8px 14px;
    }
}


/* ─────────────────────────────────────────────────────────
   DOBLE CUADRO supervisor
   ───────────────────────────────────────────────────────── */

.ca-admin-flex {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ca-admin-flex .ca-estado-wrapper {
    flex: 1 1 320px;
    max-width: 380px;
}

.ca-estado-header.ca-header-admin {
    background-color: #5a6268;
}



/* =========================================================================
   3) ERP_SolicitarDias.php  (calendario de solicitud de días)
   ========================================================================= */

/* ─────────────────────────────────────────────────────────
   WRAPPER
   ───────────────────────────────────────────────────────── */

.sd-wrapper {
    margin: 20px;
    border: 1.5px solid #77bc1f;
    border-radius: 12px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────
   CABECERA
   ───────────────────────────────────────────────────────── */

.sd-header {
    background: #77bc1f;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.sd-header-logo {
    max-height: 90px;
    padding: 5px;
    border-radius: 4px;
}

.sd-title-block {
    flex: 1;
    color: #ffffff;
}

.sd-title-block h1 {
    margin: 0;
    font-size: 18px;
}

.sd-title-block p {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: 0.9;
}

/* Botón "Volver" propio de la cabecera verde de Solicitar Días.
   Nota: cuando esta misma clase se usa dentro de .btn-custom-volver
   (en las vistas unificadas), las reglas de .btn-custom-volver
   con !important tienen prioridad y lo pintan gris, no verde. */
.sd-btn-volver {
    flex-shrink: 0;
    background: #ffffff;
    color: #4a8c0f;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-family: Arial, sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.sd-btn-volver:hover {
    background: #f2fae8;
}


/* ─────────────────────────────────────────────────────────
   CUERPO
   ───────────────────────────────────────────────────────── */

.sd-body {
    background: #f9f9f9;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────
   CALENDARIO
   ───────────────────────────────────────────────────────── */

.sd-calendario-card {
    flex: 1 1 340px;
    max-width: 420px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 16px;
    box-sizing: border-box;
}

.sd-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sd-cal-titulo {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
}

.sd-nav-btn {
    width: 32px;
    height: 32px;
    background: #e8f7d4;
    border: none;
    border-radius: 6px;
    color: #4a8c0f;
    font-size: 14px;
    cursor: pointer;
}

.sd-nav-btn:hover {
    background: #d5f0b0;
}

.sd-cal-diassemana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
    text-align: center;
    font-size: 11px;
    color: #888888;
}

.sd-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

#sd-cal-grid .sd-cal-dia {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f5f5f5;
    color: #333333;
    font-size: 13px;
    cursor: pointer;
}

#sd-cal-grid .sd-cal-dia:hover:not(.sd-cal-deshabilitado):not(.sd-cal-seleccionado):not(.sd-cal-pendiente):not(.sd-cal-aprobado) {
    background: #e8f7d4 !important;
    color: #333333 !important;
}

#sd-cal-grid .sd-cal-dia-vacio {
    background: transparent;
    cursor: default;
}

#sd-cal-grid .sd-cal-hoy {
    border: 1.5px solid #77bc1f;
    font-weight: bold;
}

#sd-cal-grid .sd-cal-deshabilitado {
    cursor: not-allowed;
}

#sd-cal-grid .sd-cal-dia.sd-cal-deshabilitado:not(.sd-cal-pendiente):not(.sd-cal-aprobado):not(.sd-cal-denegado) {
    background: transparent !important;
    color: #cccccc !important;
}

/* Estados */
#sd-cal-grid .sd-cal-dia.sd-cal-seleccionado {
    background: #77bc1f !important;
    color: #ffffff !important;
    font-weight: bold;
}

#sd-cal-grid .sd-cal-dia.sd-cal-pendiente {
    background-color: #f5d76e !important;
    color: #6b5900 !important;
    font-weight: bold;
}

#sd-cal-grid .sd-cal-dia.sd-cal-aprobado {
    background-color: #77bc1f !important;
    color: #ffffff !important;
    font-weight: bold;
}

#sd-cal-grid .sd-cal-dia.sd-cal-denegado {
    background-color: #e74c3c !important;
    color: #ffffff !important;
    font-weight: bold;
}


/* ─────────────────────────────────────────────────────────
   LEYENDA CALENDARIO
   ───────────────────────────────────────────────────────── */

.sd-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #eeeeee;
    font-size: 12px;
    color: #555555;
}

.sd-leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sd-leyenda-punto {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 4px;
}

.sd-punto-pendiente {
    background: #f5d76e;
}

.sd-punto-aprobado {
    background: #77bc1f;
}

.sd-punto-denegado {
    background: #e74c3c;
}


/* ─────────────────────────────────────────────────────────
   SELECCIÓN DE DÍAS
   ───────────────────────────────────────────────────────── */

.sd-seleccion-card {
    flex: 1 1 260px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 16px;
    box-sizing: border-box;
}

.sd-seleccion-card h3 {
    margin-bottom: 12px;
    font-size: 14px;
    color: #333333;
}

.sd-lista-dias {
    max-height: 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    padding: 0;
    list-style: none;
    overflow-y: auto;
}

.sd-lista-dias li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f2fae8;
    border-radius: 6px;
    font-size: 13px;
    color: #333333;
}

.sd-lista-dias li.sd-vacio {
    justify-content: center;
    background: transparent;
    color: #999999;
    font-size: 12px;
}

.sd-quitar-dia {
    background: none;
    border: none;
    color: #c0392b;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}


/* ─────────────────────────────────────────────────────────
   MOTIVO
   ───────────────────────────────────────────────────────── */

.sd-motivo-block {
    margin-bottom: 16px;
}

.sd-motivo-block label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
}

.sd-motivo-textarea {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #333333;
    resize: vertical;
    box-sizing: border-box;
}

.sd-motivo-textarea:focus {
    outline: none;
    border-color: #77bc1f;
}


/* ─────────────────────────────────────────────────────────
   BOTÓN ENVIAR
   ───────────────────────────────────────────────────────── */

.sd-btn-enviar {
    width: 100%;
    padding: 12px;
    background: #77bc1f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    cursor: pointer;
}

.sd-btn-enviar:hover:not(:disabled) {
    background: #63a018;
}

.sd-btn-enviar:disabled {
    background: #cccccc;
    cursor: not-allowed;
}


/* ─────────────────────────────────────────────────────────
   PANEL ADMIN
   ───────────────────────────────────────────────────────── */

.sd-admin-panel {
    margin: 0 20px 20px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10px;
}

.sd-admin-panel h2 {
    margin: 0 0 14px;
    font-size: 15px;
    color: #333333;
}

.sd-admin-vacio {
    font-size: 13px;
    color: #999999;
}

.sd-admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sd-admin-tabla th {
    padding: 8px 10px;
    text-align: left;
    color: #666666;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 2px solid #eeeeee;
}

.sd-admin-tabla td {
    padding: 10px;
    color: #333333;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.sd-admin-acciones {
    min-width: 220px;
}

.sd-admin-form-inline {
    display: inline-block;
    margin-right: 8px;
}

/* Botones admin */
.sd-btn-aprobar,
.sd-btn-denegar,
.sd-btn-confirmar-denegar {
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.sd-btn-aprobar {
    background: #77bc1f;
    color: #ffffff;
}

.sd-btn-aprobar:hover {
    background: #63a018;
}

.sd-btn-denegar {
    background: #e74c3c;
    color: #ffffff;
}

.sd-btn-denegar:hover {
    background: #c0392b;
}

.sd-denegar-block {
    width: 100%;
    max-width: 320px;
    margin-top: 10px;
}

.sd-btn-confirmar-denegar {
    width: 100%;
    background: #c0392b;
    color: #ffffff;
}

.sd-btn-confirmar-denegar:hover {
    background: #a5311f;
}


/* ─────────────────────────────────────────────────────────
   MODAL ADMIN
   ───────────────────────────────────────────────────────── */

.sd-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
}

.sd-modal-content {
    position: relative;
    width: 320px;
    max-width: 90%;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.sd-modal-cerrar {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    color: #888888;
    cursor: pointer;
}

.sd-modal-content h3 {
    margin-top: 0;
    font-size: 16px;
    color: #333333;
}

.sd-modal-content p {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.4;
    color: #666666;
}


/* ─────────────────────────────────────────────────────────
   TOASTS SOLICITAR DÍAS
   ───────────────────────────────────────────────────────── */

#sd-toast-container {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    pointer-events: none;
}

.sd-toast {
    position: relative;
    width: 340px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 28px 24px;
    background: #ffffff;
    border-top: 5px solid #cccccc;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #333333;
    text-align: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.sd-toast.activo {
    opacity: 1;
    transform: scale(1);
}

.sd-toast-exito {
    border-top-color: #77bc1f;
}

.sd-toast-error {
    border-top-color: #e74c3c;
}

.sd-toast-icono {
    font-size: 34px;
    line-height: 1;
}

.sd-toast-cerrar {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 20px;
    color: #aaaaaa;
    cursor: pointer;
}

.sd-toast-cerrar:hover {
    color: #333333;
}


/* ─────────────────────────────────────────────────────────
   RESPONSIVE SOLICITAR DÍAS
   ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .sd-body {
        flex-direction: column;
    }

    .sd-calendario-card,
    .sd-seleccion-card {
        width: 100%;
        max-width: 100%;
    }

    .sd-admin-tabla,
    .sd-admin-tabla thead,
    .sd-admin-tabla tbody,
    .sd-admin-tabla th,
    .sd-admin-tabla td,
    .sd-admin-tabla tr {
        display: block;
        width: 100%;
    }

    .sd-admin-tabla thead {
        display: none;
    }

    .sd-admin-tabla td {
        border-bottom: none;
    }

    .sd-admin-tabla tr {
        margin-bottom: 10px;
        border-bottom: 2px solid #eeeeee;
    }
}



/* =========================================================================
   4) LÍNEA VISUAL UNIFICADA
   -------------------------------------------------------------------------
   Todo lo que antes iba en los <style> de cada vista:
     Gestionar trabajadores · Mis datos · Datos de la empresa · Convenios
     Jornadas · Puestos de trabajo · Informe de horas · Incidencias
     Horas extra · Justificantes · Solicitar días · Control de acceso
   Va al final para tener prioridad sobre las secciones 1-3.
   ========================================================================= */


/* ─────────────────────────────────────────────────────────
   4.1 CONTENEDOR Y MENSAJES
   ───────────────────────────────────────────────────────── */

.contenido.clientes {
    padding: 0 16px;
}

/* Aviso del controlador en "Datos de la empresa" */
.contenido.clientes .de-alerta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px 0;
    padding: 14px 18px;
    background: #f0f7e6;
    border: 1px solid #c5e1a5;
    border-left: 4px solid #77bc1f;
    border-radius: 6px;
    color: #365314;
    font-size: 15px;
    font-weight: 600;
}

/* Recuadro informativo con línea verde a la izquierda */
.aviso-info {
    margin: 0 0 20px 0;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #77bc1f;
    border-radius: 6px;
    color: #475569;
    font-size: 14px;
    line-height: 1.5;
}

#formulario-jornada .aviso-info {
    margin: 16px 0 0 0;
}


/* ─────────────────────────────────────────────────────────
   4.2 CABECERA COMÚN DE LAS PANTALLAS DE GESTIÓN
   logo izquierda · icono + título centro · usuario derecha
   (ge = trabajadores, md = mis datos, de = empresa, cv = convenios,
    jn = jornadas, pt = puestos, ih = informe, inc = incidencias)
   ───────────────────────────────────────────────────────── */

.contenido.clientes .ge-cabecera,
.contenido.clientes .md-cabecera,
.contenido.clientes .de-cabecera,
.contenido.clientes .cv-cabecera,
.contenido.clientes .jn-cabecera,
.contenido.clientes .pt-cabecera,
.contenido.clientes .ih-cabecera,
.contenido.clientes .inc-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    margin: 0 0 20px 0;
    padding: 10px 18px;
    background: #77bc1f;
    border-radius: 6px;
    box-sizing: border-box;
}

.contenido.clientes .ge-cabecera-logo,
.contenido.clientes .md-cabecera-logo,
.contenido.clientes .de-cabecera-logo,
.contenido.clientes .cv-cabecera-logo,
.contenido.clientes .jn-cabecera-logo,
.contenido.clientes .pt-cabecera-logo,
.contenido.clientes .ih-cabecera-logo,
.contenido.clientes .inc-cabecera-logo {
    justify-self: start;
    display: flex;
    align-items: center;
    min-height: 36px;
}

/* Logo sin fondo */
.contenido.clientes .ge-cabecera-logo img,
.contenido.clientes .md-cabecera-logo img,
.contenido.clientes .de-cabecera-logo img,
.contenido.clientes .cv-cabecera-logo img,
.contenido.clientes .jn-cabecera-logo img,
.contenido.clientes .pt-cabecera-logo img,
.contenido.clientes .ih-cabecera-logo img,
.contenido.clientes .inc-cabecera-logo img {
    display: block;
    width: auto;
    max-height: 36px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.contenido.clientes .information h3.ge-cabecera-titulo,
.contenido.clientes .information h3.md-cabecera-titulo,
.contenido.clientes .information h3.de-cabecera-titulo,
.contenido.clientes .information h3.cv-cabecera-titulo,
.contenido.clientes .information h3.jn-cabecera-titulo,
.contenido.clientes .information h3.pt-cabecera-titulo,
.contenido.clientes .information h3.ih-cabecera-titulo,
.contenido.clientes .information h3.inc-cabecera-titulo {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.contenido.clientes .information h3.ge-cabecera-titulo span,
.contenido.clientes .information h3.md-cabecera-titulo span,
.contenido.clientes .information h3.de-cabecera-titulo span,
.contenido.clientes .information h3.cv-cabecera-titulo span,
.contenido.clientes .information h3.jn-cabecera-titulo span,
.contenido.clientes .information h3.pt-cabecera-titulo span,
.contenido.clientes .information h3.ih-cabecera-titulo span,
.contenido.clientes .information h3.inc-cabecera-titulo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contenido.clientes .information h3.ge-cabecera-titulo svg,
.contenido.clientes .information h3.md-cabecera-titulo svg,
.contenido.clientes .information h3.de-cabecera-titulo svg,
.contenido.clientes .information h3.cv-cabecera-titulo svg,
.contenido.clientes .information h3.jn-cabecera-titulo svg,
.contenido.clientes .information h3.pt-cabecera-titulo svg,
.contenido.clientes .information h3.ih-cabecera-titulo svg,
.contenido.clientes .information h3.inc-cabecera-titulo svg {
    display: inline-block !important;
    flex-shrink: 0;
    margin: 0 !important;
    stroke: #ffffff !important;
}

.contenido.clientes .ge-cabecera-usuario,
.contenido.clientes .md-cabecera-usuario,
.contenido.clientes .de-cabecera-usuario,
.contenido.clientes .cv-cabecera-usuario,
.contenido.clientes .jn-cabecera-usuario,
.contenido.clientes .pt-cabecera-usuario,
.contenido.clientes .ih-cabecera-usuario,
.contenido.clientes .inc-cabecera-usuario {
    justify-self: end;
    font-size: 14px;
    white-space: nowrap;
    text-align: right;
}

.contenido.clientes .ge-cabecera-usuario,
.contenido.clientes .md-cabecera-usuario,
.contenido.clientes .de-cabecera-usuario,
.contenido.clientes .cv-cabecera-usuario,
.contenido.clientes .jn-cabecera-usuario,
.contenido.clientes .pt-cabecera-usuario,
.contenido.clientes .ih-cabecera-usuario,
.contenido.clientes .inc-cabecera-usuario,
.contenido.clientes .ge-cabecera-usuario strong,
.contenido.clientes .md-cabecera-usuario strong,
.contenido.clientes .de-cabecera-usuario strong,
.contenido.clientes .cv-cabecera-usuario strong,
.contenido.clientes .jn-cabecera-usuario strong,
.contenido.clientes .pt-cabecera-usuario strong,
.contenido.clientes .ih-cabecera-usuario strong,
.contenido.clientes .inc-cabecera-usuario strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Barra bajo la cabecera con el botón "Nuevo / Añadir" a la derecha */
.contenido.clientes .ge-barra-acciones,
.contenido.clientes .cv-barra-acciones,
.contenido.clientes .jn-barra-acciones,
.contenido.clientes .pt-barra-acciones {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 14px 0;
}

/* Botón "Nuevo trabajador / Añadir convenio / ...": blanco con borde
   verde, para que no se confunda con la barra verde de la cabecera */
.btn-nuevo-cabecera {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    background: #ffffff !important;
    color: #3f6212 !important;
    border: 1px solid #77bc1f !important;
    border-radius: 6px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-nuevo-cabecera:hover,
.btn-nuevo-cabecera:focus {
    background: #f0f7e6 !important;
    color: #365314 !important;
}


/* ─────────────────────────────────────────────────────────
   4.3 PANELES DE LOS FORMULARIOS
   Fondo blanco, título en verde, icono y flecha en gris.
   ───────────────────────────────────────────────────────── */

#formulario-trabajador .panel-group > .panel,
#formulario-datos .panel-group > .panel,
#formulario-convenio .panel-group > .panel,
#formulario-jornada .panel-group > .panel,
#formulario-puesto .panel-group > .panel,
#formulario-empresa #accordion > .panel {
    margin-bottom: 12px !important;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

#formulario-trabajador .panel-group > .panel > .panel-heading,
#formulario-datos .panel-group > .panel > .panel-heading,
#formulario-convenio .panel-group > .panel > .panel-heading,
#formulario-jornada .panel-group > .panel > .panel-heading,
#formulario-puesto .panel-group > .panel > .panel-heading,
#formulario-empresa #accordion > .panel > .panel-heading {
    padding: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: none !important;
}

#formulario-trabajador .panel-group > .panel > .panel-heading a,
#formulario-datos .panel-group > .panel > .panel-heading a,
#formulario-convenio .panel-group > .panel > .panel-heading a,
#formulario-jornada .panel-group > .panel > .panel-heading a,
#formulario-puesto .panel-group > .panel > .panel-heading a,
#formulario-empresa #accordion > .panel > .panel-heading a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding: 14px 20px !important;
    background: #ffffff !important;
    color: #77bc1f !important;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

#formulario-trabajador .panel-group > .panel > .panel-heading a:hover,
#formulario-datos .panel-group > .panel > .panel-heading a:hover,
#formulario-convenio .panel-group > .panel > .panel-heading a:hover,
#formulario-jornada .panel-group > .panel > .panel-heading a:hover,
#formulario-puesto .panel-group > .panel > .panel-heading a:hover,
#formulario-empresa #accordion > .panel > .panel-heading a:hover {
    background: #f8fafc !important;
}#formulario-trabajador .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a,
#formulario-trabajador .panel-group > .panel.erp-panel-abierto > .panel-heading a,
#formulario-datos .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a,
#formulario-datos .panel-group > .panel.erp-panel-abierto > .panel-heading a,
#formulario-convenio .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a,
#formulario-convenio .panel-group > .panel.erp-panel-abierto > .panel-heading a,
#formulario-jornada .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a,
#formulario-jornada .panel-group > .panel.erp-panel-abierto > .panel-heading a,
#formulario-puesto .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a,
#formulario-puesto .panel-group > .panel.erp-panel-abierto > .panel-heading a,
#formulario-empresa #accordion > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a,
#formulario-empresa #accordion > .panel.erp-panel-abierto > .panel-heading a {
    border-bottom: 1px solid #f0f4f8;
}

#formulario-trabajador .panel-group > .panel .panel-title,
#formulario-datos .panel-group > .panel .panel-title,
#formulario-convenio .panel-group > .panel .panel-title,
#formulario-jornada .panel-group > .panel .panel-title,
#formulario-puesto .panel-group > .panel .panel-title,
#formulario-empresa #accordion > .panel .panel-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px;
    line-height: 1.3 !important;
}

#formulario-trabajador .panel-group > .panel .panel-title,
#formulario-datos .panel-group > .panel .panel-title,
#formulario-convenio .panel-group > .panel .panel-title,
#formulario-jornada .panel-group > .panel .panel-title,
#formulario-puesto .panel-group > .panel .panel-title,
#formulario-empresa #accordion > .panel .panel-title,
#formulario-trabajador .panel-group > .panel .panel-title span:not(.badge-count),
#formulario-datos .panel-group > .panel .panel-title span:not(.badge-count),
#formulario-convenio .panel-group > .panel .panel-title span:not(.badge-count),
#formulario-jornada .panel-group > .panel .panel-title span:not(.badge-count),
#formulario-puesto .panel-group > .panel .panel-title span:not(.badge-count),
#formulario-empresa #accordion > .panel .panel-title span:not(.badge-count) {
    color: #77bc1f !important;
    font-weight: 700;
}

#formulario-trabajador .panel-group > .panel .panel-title i.panel-icon,
#formulario-datos .panel-group > .panel .panel-title i.panel-icon,
#formulario-convenio .panel-group > .panel .panel-title i.panel-icon,
#formulario-jornada .panel-group > .panel .panel-title i.panel-icon,
#formulario-puesto .panel-group > .panel .panel-title i.panel-icon,
#formulario-empresa #accordion > .panel .panel-title i.panel-icon {
    display: inline-block !important;
    width: 20px;
    color: #64748b !important;
    font-size: 16px;
    text-align: center;
    transform: none !important;
}

#formulario-trabajador .panel-group > .panel .panel-title i.fa-chevron-down,
#formulario-datos .panel-group > .panel .panel-title i.fa-chevron-down,
#formulario-convenio .panel-group > .panel .panel-title i.fa-chevron-down,
#formulario-jornada .panel-group > .panel .panel-title i.fa-chevron-down,
#formulario-puesto .panel-group > .panel .panel-title i.fa-chevron-down,
#formulario-empresa #accordion > .panel .panel-title i.fa-chevron-down {
    margin-left: auto;
    color: #94a3b8 !important;
    font-size: 13px;
    transform: rotate(0deg) !important;
    transition: transform 0.3s ease;
}/* Panel abierto: flecha hacia arriba */
#formulario-trabajador .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
/* Panel abierto: flecha hacia arriba */
#formulario-trabajador .panel-group > .panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down,
#formulario-datos .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
#formulario-datos .panel-group > .panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down,
#formulario-convenio .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
#formulario-convenio .panel-group > .panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down,
#formulario-jornada .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
#formulario-jornada .panel-group > .panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down,
#formulario-puesto .panel-group > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
#formulario-puesto .panel-group > .panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down,
#formulario-empresa #accordion > .panel:has(> .panel-collapse:is(.in, .show):not(.erp-cerrando)) > .panel-heading a i.fa-chevron-down,
#formulario-empresa #accordion > .panel.erp-panel-abierto > .panel-heading a i.fa-chevron-down {
    transform: rotate(180deg) !important;
}

#formulario-trabajador .panel-group > .panel .panel-body,
#formulario-datos .panel-group > .panel .panel-body,
#formulario-convenio .panel-group > .panel .panel-body,
#formulario-jornada .panel-group > .panel .panel-body,
#formulario-puesto .panel-group > .panel .panel-body,
#formulario-empresa #accordion > .panel .panel-body {
    padding: 24px 28px 28px 28px !important;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Segundo bloque del panel de texto legal (Datos de la empresa) */
#formulario-empresa #accordion > .panel > .panel-collapse > .panel-body.panel-body-seguida {
    padding-top: 0 !important;
    border-top: none !important;
}

/* Contador de centros adicionales */
#formulario-empresa .badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: #eef7e2;
    color: #3f6212 !important;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
}


/* ─────────────────────────────────────────────────────────
   4.4 CAMPOS (44px de alto y 16px de letra en tablet)
   ───────────────────────────────────────────────────────── */

#formulario-trabajador .form-control,
#formulario-trabajador input[type="text"],
#formulario-trabajador input[type="password"],
#formulario-trabajador input[type="date"],
#formulario-trabajador select,
#formulario-convenio .form-control,
#formulario-jornada .form-control,
#formulario-puesto .form-control,
#formulario-empresa input[type="text"],
#formulario-empresa input[type="email"],
#formulario-empresa input[type="tel"],
#formulario-empresa select {
    min-height: 44px;
    height: 44px;
    font-size: 16px !important;
}

#formulario-empresa textarea {
    font-size: 16px !important;
}

#formulario-trabajador input[type="file"].form-control,
#formulario-convenio input[type="file"].form-control,
#formulario-empresa input[type="file"].form-control {
    height: auto;
    min-height: 0;
    padding: 9px 10px !important;
    font-size: 14px !important;
}

#formulario-jornada input[type="time"].form-control {
    padding: 0 8px;
    text-align: center;
    cursor: pointer;
}

#formulario-trabajador input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    accent-color: #77bc1f;
}

#formulario-trabajador input:focus,
#formulario-trabajador select:focus,
#formulario-empresa input:focus,
#formulario-empresa select:focus,
#formulario-empresa textarea:focus,
#formulario-convenio .form-control:focus,
#formulario-jornada .form-control:focus,
#formulario-puesto .form-control:focus {
    border-color: #77bc1f !important;
    box-shadow: 0 0 0 3px rgba(119, 188, 31, 0.18) !important;
    outline: none;
}

#formulario-trabajador .form-grid-2,
#formulario-trabajador .form-grid-3,
#formulario-trabajador .dual_input {
    gap: 22px 28px;
}

#formulario-empresa .form-grid-2,
#formulario-empresa .form-grid-3,
#formulario-empresa .dual_input {
    gap: 20px 28px;
}

#formulario-trabajador .form-group,
#formulario-convenio .form-group,
#formulario-jornada .form-group,
#formulario-puesto .form-group {
    margin: 0;
    min-width: 0;
}

/* Rejillas propias de Convenios / Jornadas / Puestos */
#formulario-convenio .cv-grid {
    display: grid;
    gap: 18px 24px;
    margin-bottom: 18px;
}

#formulario-convenio .cv-grid:last-child {
    margin-bottom: 0;
}

#formulario-convenio .cv-grid-1 {
    grid-template-columns: minmax(0, 1fr);
}

#formulario-convenio .cv-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#formulario-jornada .jn-grid,
#formulario-puesto .pt-grid {
    display: grid;
    grid-template-columns: minmax(0, 520px);
    gap: 18px 24px;
}

/* Contraseña con botón para ver / ocultar */
.gt-password-wrapper,
.dt-password-wrapper {
    position: relative;
}

#formulario-trabajador .gt-password-wrapper input[name="pwd"],
#formulario-datos .dt-password-wrapper input[name="pwd"] {
    padding-right: 46px !important;
}

.gt-toggle-pass,
.dt-toggle-pass {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.gt-toggle-pass:hover,
.dt-toggle-pass:hover {
    background: #f1f5f9;
}


/* ─────────────────────────────────────────────────────────
   4.5 MIS DATOS (#formulario-datos)
   Etiqueta arriba + caja debajo, todo en solo lectura salvo la
   contraseña.
   ───────────────────────────────────────────────────────── */

#formulario-datos .md-grid {
    display: grid;
    gap: 18px 24px;
    margin-bottom: 18px;
}

#formulario-datos .md-grid:last-child {
    margin-bottom: 0;
}

#formulario-datos .md-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#formulario-datos .md-grid-calle {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
}

#formulario-datos .md-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#formulario-datos .md-campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

#formulario-datos .md-campo label {
    position: static !important;
    transform: none !important;
    display: block;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    background: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    line-height: 1.3 !important;
}

#formulario-datos .md-campo input,
#formulario-datos .md-campo select {
    width: 100%;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* Desplegables de solo lectura: sin flecha, mismo aspecto que un campo */
#formulario-datos .md-campo select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #475569 !important;
}

#formulario-datos input[name="pwd"] {
    border-color: #cbd5e1 !important;
}

#formulario-datos input[name="pwd"]:focus {
    border-color: #77bc1f !important;
    box-shadow: 0 0 0 3px rgba(119, 188, 31, 0.18) !important;
    outline: none;
}


/* ─────────────────────────────────────────────────────────
   4.6 TABLAS
   ───────────────────────────────────────────────────────── */

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.table-responsive .table {
    margin: 0;
    background: #ffffff;
}

.table-responsive .table th,
.table-responsive .table td {
    text-align: left;
    font-size: 14px;
    color: #1e293b;
}

.table-responsive .table thead th {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* Cabeceras ordenables */
.table-ordenable thead th[data-col] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.table-ordenable thead th[data-col]:hover {
    background-color: #eef2f7;
}

.table-ordenable thead th[data-col] i {
    margin-left: 4px;
    font-size: 11px;
    color: #94a3b8;
}

.table-ordenable thead th[data-orden] i {
    color: #77bc1f;
}

/* Gestionar trabajadores: entera, sin scroll lateral */
.tabla-trabajadores {
    table-layout: fixed;
    width: 100% !important;
}

.tabla-trabajadores th,
.tabla-trabajadores td {
    padding: 9px 8px !important;
    font-size: 13px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
}

/* 9 columnas (la 9ª es "Enviar URL", apartado 4.22). Suman 100%. */
.tabla-trabajadores th:nth-child(1) { width: 10%; }
.tabla-trabajadores th:nth-child(2) { width: 14%; }
.tabla-trabajadores th:nth-child(3) { width: 17%; }
.tabla-trabajadores th:nth-child(4) { width: 9%; }
.tabla-trabajadores th:nth-child(5) { width: 10%; }
.tabla-trabajadores th:nth-child(6) { width: 12%; }
.tabla-trabajadores th:nth-child(7) { width: 12%; }
.tabla-trabajadores th:nth-child(8) { width: 7%; }
.tabla-trabajadores th:nth-child(9) { width: 9%; }

.tabla-trabajadores td:nth-child(3) {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.tabla-trabajadores td:nth-child(8),
.tabla-trabajadores th:nth-child(8),
.tabla-trabajadores td:nth-child(9),
.tabla-trabajadores th:nth-child(9) {
    white-space: nowrap !important;
    text-align: center !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.table-responsive:has(.tabla-trabajadores) {
    overflow-x: visible;
}

/* Convenios */
.tabla-convenios {
    table-layout: fixed;
}

.tabla-convenios th:nth-child(1) { width: 28%; }
.tabla-convenios th:nth-child(2) { width: 12%; }
.tabla-convenios th:nth-child(3) { width: 13%; }
.tabla-convenios th:nth-child(4) { width: 12%; }
.tabla-convenios th:nth-child(5) { width: 13%; }
.tabla-convenios th:nth-child(6) { width: 11%; }
.tabla-convenios th:nth-child(7) { width: 11%; }

.tabla-convenios td {
    overflow-wrap: break-word;
}

.tabla-convenios th:nth-child(7),
.tabla-convenios td:nth-child(7) {
    text-align: center !important;
}

.tabla-convenios thead th[data-col] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-link-pdf {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #4d7c0f !important;
    font-weight: 600;
    text-decoration: none !important;
}

.cv-link-pdf i {
    color: #dc2626;
    font-size: 17px;
}

/* Jornadas y Puestos: columna de acciones estrecha y centrada */
.tabla-jornadas th:last-child,
.tabla-jornadas td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: center !important;
}

/* Horario de la jornada */
.tabla-horario {
    table-layout: fixed;
}

.tabla-horario th:first-child {
    width: 16%;
}

.tabla-horario td {
    padding: 6px 8px !important;
}

.tabla-horario .jn-dia {
    font-weight: 600;
    color: #334155;
}

/* Botón de editar en las tablas (44px, cómodo con el dedo) */
.btn-icon-editar {
    width: 44px;
    height: 44px;
    font-size: 16px;
}


/* ─────────────────────────────────────────────────────────
   4.7 BOTONES
   ───────────────────────────────────────────────────────── */

.action-buttons {
    flex-wrap: wrap;
    margin-top: 24px;
}

/* Guardar / Añadir / Aceptar: verde liso, texto blanco en negrita */
.btn-custom-submit,
input.btn-custom-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    margin: 0 !important;
    padding: 0 26px !important;
    background: #77bc1f !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 44px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
}

.btn-custom-submit:hover:not(:disabled),
.btn-custom-submit:focus,
.btn-custom-submit:active {
    background: #63a018 !important;
    color: #ffffff !important;
}

.btn-custom-submit:disabled {
    background: #cbd5e1 !important;
    cursor: not-allowed !important;
}

/* Botones secundarios: blanco con borde verde
   ("Cambiar logo" y "Añadir dirección adicional") */
#formulario-empresa input.btn-custom-submit.btn-secundario,
#formulario-empresa .btn-anadir-dir {
    height: 44px !important;
    margin-top: 12px !important;
    padding: 0 18px !important;
    background: #ffffff !important;
    color: #3f6212 !important;
    border: 1px solid #77bc1f !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    box-shadow: none !important;
}

#formulario-empresa .btn-anadir-dir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0 !important;
}

#formulario-empresa .btn-anadir-dir i {
    color: #77bc1f !important;
}

#formulario-empresa input.btn-custom-submit.btn-secundario:hover,
#formulario-empresa .btn-anadir-dir:hover {
    background: #f0f7e6 !important;
    color: #365314 !important;
}

/* Eliminar en la botonera: blanco con borde rojo y separado a la
   izquierda, para no pulsarlo sin querer */
.action-buttons .btn-custom-eliminar {
    height: 44px;
    margin-right: auto;
    padding: 0 18px;
    background-color: #ffffff;
    color: #dc2626;
    border: 1px solid #fca5a5;
    font-family: inherit;
    font-weight: 700;
    transition: all 0.2s ease;
}

.action-buttons .btn-custom-eliminar:hover {
    background-color: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

/* Eliminar dentro de la lista de archivos: rojo lleno */
.archivo-pdf .btn-custom-eliminar {
    height: 44px;
    padding: 0 16px;
    font-size: 13px;
}

/* Eliminar una dirección adicional */
#formulario-empresa .btn-eliminar-dir {
    height: 40px;
    padding: 0 14px !important;
    background: #ffffff !important;
    border-color: #fca5a5 !important;
    font-family: inherit;
    font-weight: 700 !important;
}

#formulario-empresa .btn-eliminar-dir:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

#formulario-empresa .direccion-adicional-bloque {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* Volver: gris claro en todas las pantallas */
.btn-custom-volver a,
.btn-custom-volver input,
.btn-custom-volver button,
.ca-btn-volver,
.sd-btn-volver {
    height: 44px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 22px !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.btn-custom-volver a:hover,
.btn-custom-volver input:hover,
.btn-custom-volver button:hover,
.ca-btn-volver:hover,
.sd-btn-volver:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* Ver PDF: verde */
.btn-icon-ver {
    height: 40px;
    padding: 0 14px;
    background-color: #77bc1f;
    font-weight: 700;
}

.btn-icon-ver:hover {
    background-color: #63a018;
}


/* ─────────────────────────────────────────────────────────
   4.8 ARCHIVOS, LOGO Y DOCUMENTOS
   ───────────────────────────────────────────────────────── */

.titulo-archivos {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #475569;
}

.sin-archivos {
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 7px;
    color: #64748b;
    font-size: 14px;
}

#formulario-convenio .archivo-pdf {
    margin-bottom: 0;
    padding: 10px 14px;
    background: #f8fafc;
}

.logo-preview-box {
    margin-bottom: 20px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
}


/* ─────────────────────────────────────────────────────────
   4.9 INFORME DE HORAS (ih-)
   ───────────────────────────────────────────────────────── */

.ih-card {
    margin: 0 0 16px 0;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.ih-card-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px 0;
}

.ih-card-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #77bc1f;
}

.ih-contador {
    font-size: 13px;
    color: #64748b;
}

.ih-barra-filtros {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ih-form-filtros {
    flex: 1 1 auto;
    margin: 0;
}

.ih-filtros {
    display: grid;
    grid-template-columns: 140px 180px minmax(200px, 280px);
    gap: 16px;
}

.ih-filtros .form-group {
    margin: 0;
    min-width: 0;
}

.ih-filtros .form-control {
    height: 44px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

.ih-filtros .form-control:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Descargar PDF del informe: blanco con borde verde */
.btn-accion.btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    background: #ffffff;
    color: #3f6212;
    border: 1px solid #77bc1f;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-accion.btn-pdf:hover,
.btn-accion.btn-pdf:active {
    background: #f0f7e6;
    color: #365314;
}

.tabla-informe th:nth-child(1) { width: 10%; }
.tabla-informe th:nth-child(2) { width: 15%; }
.tabla-informe th:nth-child(3) { width: 35%; }
.tabla-informe th:nth-child(4) { width: 9%; }
.tabla-informe th:nth-child(5) { width: 10%; }
.tabla-informe th:nth-child(6) { width: 11%; }
.tabla-informe th:nth-child(7) { width: 10%; }

.ih-vacio {
    padding: 24px !important;
    text-align: center !important;
    color: #64748b !important;
}

/* Fichajes del informe (paleta apta para daltónicos: no tocar colores) */
.fichajes-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.sin-fichajes {
    color: #94a3b8;
}

.form-abrir-incidencia {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.badge-id-incidencia {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 700;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.badge-id-incidencia:hover {
    background: #fecaca;
    color: #991b1b;
    text-decoration: none;
}

.leyenda-fichajes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.chip i { font-size: 11px; }

.chip-entrar { background: #d7f2ea; color: #00543a; border-color: #009e73; }
.chip-pausa { background: #fdecc8; color: #7a5900; border-color: #e69f00; }
.chip-reanudar { background: #dcf0fb; color: #004c73; border-color: #56b4e9; }
.chip-salir { background: #f9e0d4; color: #7a2e00; border-color: #d55e00; }
.chip-otro { background: #e2e8f0; color: #334155; border-color: #94a3b8; }
.chip-horaextra-aprobada { background: #fcf7cf; color: #5c5100; border-color: #f0e442; }
.chip-horaextra-pendiente { background: #e2e8f0; color: #334155; border-color: #94a3b8; }


/* ─────────────────────────────────────────────────────────
   4.10 PAGINADOR Y PIE (Informe de horas e Incidencias)
   ───────────────────────────────────────────────────────── */

.paginador {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

#paginador-informe {
    justify-content: center;
    margin-top: 14px;
}

.paginador:empty {
    display: none;
}

.btn-pagina {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pagina:hover:not(:disabled) {
    background: #f0f7e6;
    border-color: #77bc1f;
    color: #3f6212;
}

.btn-pagina.activo {
    background: #77bc1f;
    border-color: #77bc1f;
    color: #ffffff;
}

.btn-pagina:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pie-informe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

/* En el informe solo está "Volver": a la derecha */
.contenido.clientes:has(.ih-cabecera) .pie-informe {
    justify-content: flex-end;
    margin-top: 8px;
}


/* ─────────────────────────────────────────────────────────
   4.11 INCIDENCIAS (inc-)
   ───────────────────────────────────────────────────────── */

.cabecera-listado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px 0;
}

.btn-reset-filtros {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background-color: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.btn-reset-filtros:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

.filtros-incidencias {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 16px 0;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.filtro-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.filtro-item label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.filtro-select,
.filtro-date {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 16px;
    color: #1e293b;
    box-sizing: border-box;
}

.filtro-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.filtro-select:focus,
.filtro-date:focus,
.gestionar-input-hora:focus {
    outline: none;
    border-color: #77bc1f !important;
    box-shadow: 0 0 0 3px rgba(119, 188, 31, 0.18) !important;
}

.tabla-incidencias td {
    overflow-wrap: break-word;
}

.inc-col-acciones {
    width: 1%;
    white-space: nowrap;
    text-align: center !important;
}

.badge-pendiente,
.badge-solventada {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-pendiente { background: #fffbeb; color: #b45309; border: 1px solid #f59e0b; }
.badge-solventada { background: #f0f7e6; color: #3f6212; border: 1px solid #77bc1f; }

.btn-icon-correcciones {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #64748b;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color 0.2s ease;
}

.btn-icon-correcciones:hover {
    background-color: #475569;
}

/* Formulario de la incidencia en una tarjeta blanca */
.inc-card {
    padding: 22px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.inc-card .form-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inc-card .form-group {
    margin: 0;
    min-width: 0;
}

.inc-card .form-control {
    min-height: 44px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 16px;
}

.inc-card textarea.form-control {
    padding: 10px 12px;
    line-height: 1.5;
}

.inc-card input[type="file"].form-control {
    min-height: 0;
    padding: 9px 10px;
    font-size: 14px;
}

.form-control:disabled,
select.form-control:disabled,
textarea.form-control:disabled {
    background-color: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
    opacity: 1;
}

.campo-obligatorio {
    color: #dc2626;
    font-weight: 700;
}

/* Avisos del formulario de incidencia */
.aviso-primera-gestion {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-left-width: 4px;
    border-radius: 6px;
    color: #1e3a8a;
    font-size: 14px;
    line-height: 1.5;
}

.aviso-primera-gestion i { font-size: 16px; color: #3b82f6; }
.aviso-via-calendario { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.aviso-via-calendario i { color: #d97706; }
.aviso-incidencia-cerrada { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.aviso-incidencia-cerrada i { color: #dc2626; }

/* Cajas de fichajes (verde = cumple el horario, rojo = no) */
.gestionar-fichajes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    min-height: 20px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.sin-fichajes-gestion {
    color: #94a3b8;
    font-size: 13px;
}

.gestionar-ayuda {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #64748b;
}

.gestionar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.gestionar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 80px;
    padding: 14px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gestionar-box-label {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gestionar-box-titulo {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gestionar-box-titulo-tocaba { margin-top: 8px; }

.gestionar-box-sin-registro {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 700;
    color: #dc2626;
}

.gestionar-box-esperado {
    font-size: 15px;
    font-weight: 700;
    color: #64748b;
}

.gestionar-box-ok { background: #f0f7e6; border-color: #a3d36a; }
.gestionar-box-ok .gestionar-input-hora { color: #3f6212; border-color: #a3d36a; }
.gestionar-box-vacio { background: #fef2f2; border-color: #fecaca; }
.gestionar-box-vacio .gestionar-input-hora { color: #991b1b; border-color: #fecaca; }

.gestionar-input-hora {
    width: 100%;
    max-width: 130px;
    height: 44px;
    margin-top: 4px;
    padding: 0 8px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #1e293b;
    cursor: pointer;
}

/* Justificante (vía calendario) */
.justificante-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.justificante-doc a { color: #4d7c0f; font-weight: 600; text-decoration: none; }
.justificante-doc a:hover { text-decoration: underline; }
.justificante-doc i { color: #dc2626; margin-right: 6px; }
.justificante-sin-doc { color: #94a3b8; font-size: 13px; }

.justificante-pendiente-revision,
.justificante-incidencia-cerrada {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
}

.justificante-pendiente-revision { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.justificante-incidencia-cerrada { font-weight: 600; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; }

/* Ventana "¿Se ha solucionado la incidencia?" */
.incidencia-overlay {
    display: none;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    z-index: 9999;
}

.incidencia-overlay.activo {
    display: flex;
}

.incidencia-modal {
    width: 90%;
    max-width: 380px;
    padding: 32px 28px;
    background: #ffffff;
    border-top: 4px solid #77bc1f;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.incidencia-modal-icono {
    margin-bottom: 12px;
    font-size: 34px;
    color: #77bc1f;
}

.incidencia-modal h3 {
    margin: 0 0 10px 0;
    padding: 0;
    border: none;
    font-size: 18px;
    color: #1e293b;
}

.incidencia-modal p {
    margin: 0 0 22px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
}

.incidencia-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.incidencia-btn-si,
.incidencia-btn-no {
    min-height: 46px;
    padding: 11px 16px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.incidencia-btn-si { background: #77bc1f; color: #ffffff; }
.incidencia-btn-si:hover { background: #63a018; }
.incidencia-btn-no { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; }
.incidencia-btn-no:hover { background: #e2e8f0; }


/* ─────────────────────────────────────────────────────────
   4.12 PANTALLAS "sd-" (Justificantes · Solicitar días · Horas extra)
   Contenedor sin marco y cabecera verde:
   logo izquierda · icono + título centro · usuario derecha
   ───────────────────────────────────────────────────────── */

.sd-wrapper,
.sd-wrapper button,
.sd-wrapper select,
.sd-wrapper textarea,
.sd-modal-content,
.sd-modal-content button,
.sd-modal-content textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.sd-wrapper {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 20px auto !important;
    padding: 0 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.sd-header {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 18px !important;
    background: #77bc1f !important;
    background-image: none !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: none !important;
}

/* Logo sin fondo */
.sd-header .sd-header-logo {
    position: static !important;
    display: block !important;
    justify-self: start;
    width: auto !important;
    height: auto !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.sd-header .sd-title-block {
    position: static !important;
    flex: none !important;
    justify-self: center;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
}

.sd-header .sd-title-block h1 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap;
}

.sd-header .sd-titulo-icono {
    display: inline-block !important;
    flex-shrink: 0;
    stroke: #ffffff !important;
}

.sd-header .sd-title-block p {
    margin: 3px 0 0 0 !important;
    font-size: 13px !important;
    text-align: center !important;
}

.sd-header .sd-header-usuario {
    justify-self: end;
    font-size: 14px;
    white-space: nowrap;
    text-align: right;
}

.sd-header .sd-title-block h1,
.sd-header .sd-title-block p,
.sd-header .sd-header-usuario,
.sd-header strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Cuerpo sin fondo gris ni bordes */
.sd-body {
    display: block;
    margin: 0 !important;
    padding: 20px 0 0 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Volver: abajo a la derecha, con línea separadora */
.sd-wrapper .ca-volver-abajo {
    position: static !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: none !important;
    margin: 24px 0 0 0 !important;
    padding: 20px 0 0 0 !important;
    background: transparent !important;
    border: none !important;
    border-top: 1px solid #e2e8f0 !important;
    box-sizing: border-box;
}

/* Tarjetas blancas comunes */
.sd-calendario-card,
.sd-seleccion-card,
.sd-resumen-card,
.sd-aprobados-card,
.sd-pendientes-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 22px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
}

.sd-seleccion-card h3,
.sd-resumen-titulo {
    margin: 0 0 4px 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #77bc1f !important;
}

.sd-seleccion-card h3 {
    margin-bottom: 12px !important;
}

.sd-resumen-subtitulo {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: #64748b;
}

.sd-resumen-subtitulo strong {
    color: #334155;
}

.ca-empty {
    margin: 0;
    color: #64748b;
    font-size: 13px;
}

/* Resumen (lista con punto de color) */
.sd-resumen-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sd-resumen-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #f1f5f9;
}

.sd-resumen-item:last-child {
    border-bottom: none;
}

.sd-resumen-label {
    flex: 1;
    font-size: 14px;
    color: #334155;
}

.sd-resumen-valores {
    display: flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

.sd-resumen-convenio {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.sd-resumen-separador {
    color: #cbd5e1;
    font-size: 13px;
}

.sd-resumen-usados {
    font-size: 13px;
    color: #64748b;
}

.sd-resumen-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    color: #64748b;
    text-align: right;
}

.sd-resumen-total strong {
    color: #1e293b;
    font-size: 15px;
}

.sd-resumen-punto {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.sd-resumen-punto-aprobados,
.sd-resumen-punto-vacaciones { background: #77bc1f; }
.sd-resumen-punto-pendientes,
.sd-resumen-punto-otros { background: #f59e0b; }
.sd-resumen-punto-denegados { background: #dc2626; }
.sd-resumen-punto-total { background: #64748b; }
.sd-resumen-punto-libre { background: #3b82f6; }

.sd-resumen-color-aprobado { color: #4d7c0f; }
.sd-resumen-color-pendiente { color: #d97706; }
.sd-resumen-color-denegado { color: #dc2626; }
.sd-resumen-color-total { color: #334155; }

/* Tablas de pendientes / aprobados / listado */
.sd-tabla-pendientes,
.sd-tabla-listado {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse;
    background: #ffffff;
}

.sd-tabla-pendientes th,
.sd-tabla-pendientes td,
.sd-tabla-listado th,
.sd-tabla-listado td {
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    color: #1e293b;
}

.sd-tabla-pendientes th,
.sd-tabla-listado th {
    background: #f8fafc !important;
    text-align: left;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.sd-tabla-pendientes a {
    color: #4d7c0f;
    font-weight: 600;
}

.sd-col-acciones,
.he-col-acciones {
    width: 1%;
    white-space: nowrap;
}

/* Aprobar / Denegar: 44px de alto */
.sd-btn-aprobar,
.sd-btn-denegar,
.sd-btn-confirmar-denegar {
    height: 44px;
    padding: 0 16px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sd-btn-aprobar {
    background: #77bc1f !important;
    margin-right: 6px;
}

.sd-btn-aprobar:hover { background: #63a018 !important; }

.sd-btn-denegar,
.sd-btn-confirmar-denegar { background: #dc2626 !important; }

.sd-btn-denegar:hover,
.sd-btn-confirmar-denegar:hover { background: #b91c1c !important; }

.sd-btn-ancho {
    width: 100%;
    margin-right: 0 !important;
}

/* Ventanas emergentes con franja verde arriba */
.sd-modal-backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.sd-modal-content {
    width: 90%;
    max-width: 480px;
    padding: 24px !important;
    background: #ffffff !important;
    border-top: 4px solid #77bc1f !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    color: #1e293b;
}

.sd-modal-content h3 {
    margin: 0 32px 14px 0;
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
}

.sd-modal-content p {
    font-size: 14px;
    color: #334155;
}

.sd-modal-content a {
    color: #4d7c0f;
    font-weight: 600;
}

.sd-modal-cerrar {
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    font-size: 22px;
    line-height: 1;
    color: #64748b;
}

.sd-modal-cerrar:hover {
    background: #f1f5f9;
}

.sd-motivo-block {
    margin-top: 14px;
}

.sd-motivo-block label {
    display: block;
    margin: 0 0 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* 16px en los campos: el iPad no hace zoom al tocarlos */
.sd-motivo-textarea,
select.sd-motivo-textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, box-shadow 0.2s;
}

select.sd-motivo-textarea {
    height: 44px !important;
    padding: 0 12px !important;
    cursor: pointer;
}

.sd-motivo-textarea:focus {
    border-color: #77bc1f !important;
    box-shadow: 0 0 0 3px rgba(119, 188, 31, 0.18) !important;
    outline: none !important;
}

.sd-motivo-block input[type="file"] {
    width: 100%;
    font-size: 14px;
}

.sd-btn-enviar {
    width: 100% !important;
    height: 46px !important;
    margin: 18px 0 0 0 !important;
    padding: 0 !important;
    background: #77bc1f !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sd-btn-enviar:hover:not(:disabled) { background: #63a018 !important; }

.sd-btn-enviar:disabled {
    background: #cbd5e1 !important;
    cursor: not-allowed;
}


/* ─────────────────────────────────────────────────────────
   4.13 JUSTIFICANTES
   Calendario a la izquierda, resumen de incidencias a la derecha.
   ───────────────────────────────────────────────────────── */

.sd-body:has(> .justificante-cal-card) {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr) !important;
    gap: 20px !important;
    align-items: start !important;
}

.sd-body:has(> .justificante-cal-card) .sd-pendientes-card {
    grid-column: 1 / -1;
}

.sd-body:has(> .justificante-cal-card) .sd-resumen-item {
    justify-content: space-between;
    padding: 10px 0;
}

.sd-body:has(> .justificante-cal-card) .sd-resumen-item-total {
    font-weight: 700;
}

.sd-body:has(> .justificante-cal-card) .sd-resumen-usados {
    font-size: 16px;
    font-weight: 700;
}

.justificante-cal-card.justificante-cal-grande {
    width: 100%;
    margin: 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.justificante-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.justificante-cal-titulo {
    font-size: 18px;
    font-weight: 700;
    color: #77bc1f;
    text-transform: capitalize;
}

.justificante-cal-nav-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.justificante-cal-nav-btn:hover {
    background: #f0f7e6;
    border-color: #77bc1f;
    color: #3f6212;
}

.justificante-cal-diassemana {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.justificante-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.justificante-cal-dia {
    position: relative;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border: 1.5px solid transparent;
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
}

.justificante-cal-vacio {
    background: transparent !important;
    border: none !important;
    cursor: default;
}

.justificante-cal-dia-pasado {
    background: transparent;
    color: #94a3b8;
}

.justificante-cal-libre {
    cursor: default;
}

.justificante-cal-hoy {
    border: 1.5px solid #77bc1f !important;
    background: #ffffff !important;
    font-weight: 700;
    color: #3f6212;
}

.justificante-cal-pendiente {
    background: #fffbeb !important;
    border: 1.5px solid #f59e0b !important;
    color: #b45309;
    font-weight: 700;
    cursor: pointer;
}

.justificante-cal-aprobado {
    background: #f0f7e6 !important;
    border: 1.5px solid #77bc1f !important;
    color: #3f6212;
    font-weight: 700;
    cursor: pointer;
}

.justificante-cal-denegado {
    background: #fef2f2 !important;
    border: 1.5px solid #ef4444 !important;
    color: #b91c1c;
    font-weight: 700;
    cursor: pointer;
}

.justificante-cal-pendiente:hover,
.justificante-cal-aprobado:hover,
.justificante-cal-denegado:hover {
    filter: brightness(0.97);
}

.justificante-leyenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    font-size: 12px;
    font-weight: 500;
    color: #475569;
}

.justificante-leyenda-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

.justificante-leyenda-punto {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.justificante-punto-pendiente { background: #f59e0b; }
.justificante-punto-aprobado { background: #77bc1f; }
.justificante-punto-denegado { background: #ef4444; }

.justificante-nota,
.sd-nota {
    margin: 12px 0 0 0;
    font-size: 12px;
    color: #64748b;
    text-align: center;
}

/* Listado de incidencias de un día (ventana emergente) */
.sd-modal-listado-subtitulo {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: #64748b;
}

#sd-modal-listado-contenedor {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
}

.sd-incidencia-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.sd-incidencia-info {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.4;
}

.sd-incidencia-motivo {
    color: #64748b;
    font-size: 12px;
}

.sd-btn-gestionar-incidencia {
    flex-shrink: 0;
    height: 44px;
    padding: 0 14px;
    background: #77bc1f;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sd-btn-gestionar-incidencia:hover {
    background: #63a018;
}


/* ─────────────────────────────────────────────────────────
   4.14 SOLICITAR DÍAS
   [calendario] [días seleccionados]
   [calendario] [resumen           ]
   [días aprobados — todo el ancho ]
   [solicitudes pendientes         ]
   ───────────────────────────────────────────────────────── */

.sd-body.sd-body-solicitud {
    display: grid !important;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr) !important;
    grid-template-areas:
        "cal sel"
        "cal res"
        "apr apr"
        "pen pen";
    gap: 20px !important;
    align-items: start !important;
}

.sd-body-solicitud > .sd-calendario-card { grid-area: cal; }
.sd-body-solicitud > .sd-seleccion-card { grid-area: sel; }
.sd-body-solicitud > .sd-resumen-card { grid-area: res; }
.sd-body-solicitud > .sd-aprobados-card { grid-area: apr; }
.sd-body-solicitud > .sd-pendientes-card { grid-area: pen; }

.sd-cal-nav {
    margin: 0 0 14px 0 !important;
}

.sd-cal-titulo {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #77bc1f !important;
    text-transform: capitalize;
}

.sd-nav-btn {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    -webkit-tap-highlight-color: transparent;
}

.sd-nav-btn:hover,
.sd-nav-btn:active {
    background: #f0f7e6 !important;
    border-color: #77bc1f !important;
    color: #3f6212 !important;
}

.sd-cal-diassemana {
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

.sd-cal-grid {
    gap: 6px !important;
}

/* Casillas grandes para el dedo (los colores de estado no cambian) */
.sd-cal-grid > div {
    height: 48px !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.sd-leyenda {
    gap: 16px !important;
    margin: 14px 0 0 0 !important;
    padding: 10px 0 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.sd-leyenda-punto {
    border-radius: 3px !important;
}

.sd-lista-dias {
    max-height: 180px;
    margin: 0 0 4px 0 !important;
}

.sd-lista-dias li {
    padding: 8px 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    color: #1e293b !important;
}

.sd-lista-dias li.sd-vacio {
    background: transparent !important;
    border: 1px dashed #cbd5e1 !important;
    color: #64748b !important;
}

.sd-aprobados-bloque {
    margin-top: 18px;
}

.sd-aprobados-bloque:first-of-type {
    margin-top: 10px;
}

.sd-aprobados-subtitulo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}


/* ─────────────────────────────────────────────────────────
   4.15 HORAS EXTRA (he-)
   ───────────────────────────────────────────────────────── */

.he-card {
    margin: 0 0 16px 0;
    padding: 18px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    box-sizing: border-box;
}

.he-card-titulo {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 700;
    color: #77bc1f;
}

.he-barra-filtros {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.he-barra-filtros .sd-filtros {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.sd-filtro-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 140px;
    min-width: 140px;
    max-width: 200px;
}

.sd-filtro-campo.sd-filtro-ancho {
    flex: 1 1 220px;
    max-width: 280px;
}

.sd-filtro-campo label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.sd-filtro-campo select {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 16px;
    color: #1e293b;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sd-filtro-campo select:focus {
    border-color: #77bc1f;
    box-shadow: 0 0 0 3px rgba(119, 188, 31, 0.18);
    outline: none;
}

.sd-filtro-campo select:disabled {
    background: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Descargar PDF de horas extra: blanco con borde verde */
.sd-btn-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    background: #ffffff;
    color: #3f6212;
    border: 1px solid #77bc1f;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sd-btn-pdf:hover,
.sd-btn-pdf:active {
    background: #f0f7e6;
    color: #365314;
}

/* Resúmenes en fichas */
.he-resumen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px 0;
}

.he-resumen.he-resumen-horas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.he-resumen-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    font-size: 14px;
    color: #334155;
    box-sizing: border-box;
}

.he-resumen-texto {
    flex: 1;
    min-width: 0;
}

.he-resumen-item strong {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
}

.he-resumen-horas .he-resumen-item {
    background: #f8fafc;
    box-shadow: none;
}

.he-sin-accion {
    color: #94a3b8;
}

.sd-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.sd-badge-pendiente { background: #fffbeb; color: #b45309; border: 1px solid #f59e0b; }
.sd-badge-aprobado { background: #f0f7e6; color: #3f6212; border: 1px solid #77bc1f; }
.sd-badge-denegado { background: #fef2f2; color: #b91c1c; border: 1px solid #ef4444; }
.sd-badge-entrada { background: #eff6ff; color: #1d4ed8; border: 1px solid #60a5fa; }
.sd-badge-salida { background: #fff7ed; color: #c2410c; border: 1px solid #fb923c; }

.sd-motivo-denegacion-inline {
    margin-top: 6px;
    font-size: 12px;
    color: #b91c1c;
}

.sd-gestionado-inline {
    margin-top: 4px;
    font-size: 12px;
    color: #64748b;
}

.sd-tabla-listado .ca-empty {
    padding: 24px !important;
    font-size: 14px !important;
    text-align: center !important;
}


/* ─────────────────────────────────────────────────────────
   4.16 CONTROL DE ACCESO
   ───────────────────────────────────────────────────────── */

/* Fuente muy legible para la pantalla de fichaje */
.ca-wrapper,
.ca-estado-wrapper,
.ca-estado-wrapper button,
.ca-btn,
.ca-btn-volver,
.ca-modal {
    font-family: "Atkinson Hyperlegible", Verdana, Tahoma, Arial, sans-serif !important;
}

:root {
    --acc-texto: #1f2937;
    --acc-foco: #111827;
}

/* Cabecera: logo izquierda · icono + título centro · fecha/hora o usuario derecha */
.ca-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 0 !important;
    padding: 10px 18px !important;
    background: #77bc1f !important;
    border-bottom: none !important;
    border-radius: 6px !important;
    box-sizing: border-box;
}

/* Logo sin fondo */
.ca-header .ca-header-logo {
    position: static !important;
    justify-self: start;
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ca-header .ca-title-block {
    position: static !important;
    flex: none;
    justify-self: center;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
}

.ca-header .ca-title-block h1 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.ca-header .ca-titulo-icono {
    display: inline-block !important;
    flex-shrink: 0;
    stroke: #ffffff !important;
}

.ca-header .ca-title-block p {
    margin: 3px 0 0 0 !important;
    font-size: 13px !important;
    text-align: center !important;
}

.ca-header .ca-title-block p:first-letter {
    text-transform: uppercase;
}

.ca-header .ca-datetime,
.ca-header .ca-header-usuario {
    position: static !important;
    justify-self: end;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap;
}

.ca-header .ca-header-usuario {
    font-size: 14px;
}

.ca-header .ca-title-block h1,
.ca-header .ca-title-block p,
.ca-header .ca-fecha,
.ca-header .ca-reloj,
.ca-header .ca-header-usuario,
.ca-header .ca-header-usuario strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    letter-spacing: 0.01em;
}

.ca-header-logo-vacio {
    display: block;
    min-height: 1px;
}

/* Cabecera de la pantalla de opciones: mismo ancho que las cajas */
.ca-cabecera-opciones {
    width: 100% !important;
    max-width: 1100px !important;
    margin: 20px auto 0 auto !important;
}

form:not(:has(.ca-caja-supervisor)) > .ca-cabecera-opciones {
    max-width: 820px !important;
}

/* Cajas de Registro horario / Gestión / Supervisor */
.ca-estado-header,
.ca-estado-header.ca-header-admin {
    background: #77bc1f !important;
    border-bottom: none !important;
}

.ca-estado-header h2 {
    font-size: 18px !important;
    color: #14260a !important;
    letter-spacing: 0.01em;
}

.ca-estado-wrapper {
    border-color: #9ca3af !important;
}

.ca-estado-btn {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 12px;
    min-height: 48px;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.02em !important;
    word-spacing: 0.08em;
    text-transform: none !important;
    text-align: left !important;
    cursor: pointer;
}

.ca-estado-btn:focus-visible,
.ca-btn:focus-visible,
.ca-btn-volver:focus-visible {
    outline: 3px solid var(--acc-foco) !important;
    outline-offset: 3px !important;
}

/* Botones grises (Justificantes e Incidencias) */
.ca-estado-btn.gris {
    background: gray !important;
    color: #ffffff !important;
}

/* "Continuar" del código de empresa, centrado */
.ca-estado-btn[name="verificar_codigo_empresa"] {
    justify-content: center !important;
}

/* Rejilla centrada: caja izquierda 1/3 y derecha 2/3 */
.ca-fila-superior,
.ca-fila-inferior,
.ca-volver-abajo {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.ca-fila-superior,
.ca-fila-inferior {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 20px !important;
    align-items: stretch;
}

.ca-fila-superior {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.ca-cabecera-opciones + .ca-fila-superior {
    margin-top: 16px !important;
}

.ca-fila-superior > .ca-estado-wrapper,
.ca-fila-inferior > .ca-estado-wrapper {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column;
}

/* Sin caja de supervisor: dos columnas iguales y más estrecho */
form:not(:has(.ca-caja-supervisor)) > .ca-fila-superior,
form:not(:has(.ca-caja-supervisor)) > .ca-fila-inferior,
form:not(:has(.ca-caja-supervisor)) > .ca-volver-abajo {
    max-width: 820px !important;
}

form:not(:has(.ca-caja-supervisor)) > .ca-fila-superior,
form:not(:has(.ca-caja-supervisor)) > .ca-fila-inferior {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ca-fila-superior > .ca-estado-wrapper > .ca-estado-body,
.ca-fila-inferior > .ca-estado-wrapper > .ca-estado-body {
    flex: 1 1 auto;
}

.ca-fila-superior > .ca-estado-wrapper > .ca-estado-body {
    justify-content: flex-end;
}

.ca-fila-inferior > .ca-estado-wrapper > .ca-estado-body {
    align-content: start;
    justify-content: flex-start;
}

.ca-estado-body {
    gap: 10px;
}

.ca-estado-body .ca-estado-btn {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

.ca-caja-supervisor .ca-estado-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ca-volver-abajo {
    margin-top: 14px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end;
    text-align: right;
}

/* Cuadrícula de trabajadores: tarjetas iguales */
.ca-card {
    display: flex;
    flex-direction: column;
}

.ca-card .ca-horario {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 6px;
    min-height: 24px;
}

.ca-card .ca-horario-turno {
    margin: 0 !important;
    white-space: nowrap;
}

.ca-card .ca-btn {
    margin-top: auto;
}

.ca-btn {
    min-height: 40px;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

.ca-card .ca-nombre {
    color: var(--acc-texto) !important;
    font-weight: 700 !important;
}

.ca-card .ca-horario-vacio {
    font-style: normal !important;
}



/* =========================================================================
   5) RESPONSIVE (TABLET Y MÓVIL) DE LA SECCIÓN 4
   ========================================================================= */

/* ─────────────────────────────────────────────────────────
   TABLET EN HORIZONTAL (1024×768, 1180×820, 1280×800...)
   Todo un poco más compacto para que quepa sin bajar.
   ───────────────────────────────────────────────────────── */

@media (min-width: 900px) and (max-height: 900px) and (orientation: landscape) {

    section > .container.content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .contenido.clientes {
        margin-top: 10px !important;
    }

    .contenido.clientes .ge-cabecera,
    .contenido.clientes .md-cabecera,
    .contenido.clientes .de-cabecera,
    .contenido.clientes .cv-cabecera,
    .contenido.clientes .jn-cabecera,
    .contenido.clientes .pt-cabecera,
    .contenido.clientes .ih-cabecera,
    .contenido.clientes .inc-cabecera {
        padding: 8px 14px;
        margin-bottom: 14px;
    }

    .contenido.clientes .ge-cabecera-logo img,
    .contenido.clientes .md-cabecera-logo img,
    .contenido.clientes .de-cabecera-logo img,
    .contenido.clientes .cv-cabecera-logo img,
    .contenido.clientes .jn-cabecera-logo img,
    .contenido.clientes .pt-cabecera-logo img,
    .contenido.clientes .ih-cabecera-logo img,
    .contenido.clientes .inc-cabecera-logo img {
        max-height: 30px;
    }

    .contenido.clientes .information h3.ge-cabecera-titulo,
    .contenido.clientes .information h3.md-cabecera-titulo,
    .contenido.clientes .information h3.de-cabecera-titulo,
    .contenido.clientes .information h3.cv-cabecera-titulo,
    .contenido.clientes .information h3.jn-cabecera-titulo,
    .contenido.clientes .information h3.pt-cabecera-titulo,
    .contenido.clientes .information h3.ih-cabecera-titulo,
    .contenido.clientes .information h3.inc-cabecera-titulo {
        font-size: 18px;
    }

    .ih-card,
    .he-card {
        padding: 14px 16px;
        margin-bottom: 12px;
    }

    .he-resumen {
        margin-bottom: 12px;
    }

    .he-resumen-item {
        padding: 10px 12px;
    }

    .filtros-incidencias {
        padding: 12px 14px;
    }

    .tabla-incidencias th,
    .tabla-incidencias td {
        padding: 8px !important;
        font-size: 13px !important;
    }

    /* Pantallas sd- */
    .sd-wrapper {
        margin-top: 10px !important;
    }

    .sd-header {
        padding: 8px 14px !important;
    }

    .sd-header .sd-header-logo {
        max-height: 30px !important;
    }

    .sd-header .sd-title-block h1 {
        font-size: 18px !important;
    }

    .sd-title-block p {
        font-size: 12px !important;
        margin: 2px 0 0 0 !important;
    }

    .sd-body {
        padding-top: 14px !important;
    }

    .sd-body.sd-body-solicitud {
        gap: 14px !important;
    }

    .sd-calendario-card,
    .sd-seleccion-card,
    .sd-resumen-card {
        padding: 14px 16px !important;
    }

    .sd-cal-nav {
        margin-bottom: 8px !important;
    }

    .sd-cal-grid {
        gap: 5px !important;
    }

    .sd-cal-grid > div {
        height: 44px !important;
        font-size: 15px !important;
    }

    .sd-lista-dias {
        max-height: 120px;
    }

    .sd-resumen-item {
        padding: 8px 0;
    }

    .sd-wrapper .ca-volver-abajo {
        margin-top: 14px !important;
        padding-top: 12px !important;
    }

    .justificante-cal-card.justificante-cal-grande {
        padding: 12px 18px;
    }

    .justificante-cal-nav {
        margin-bottom: 8px;
    }

    .justificante-cal-nav-btn {
        width: 38px;
        height: 38px;
    }

    .justificante-cal-titulo {
        font-size: 16px;
    }

    .justificante-cal-diassemana {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .justificante-cal-grid {
        gap: 5px;
    }

    .justificante-cal-dia {
        height: 38px;
        font-size: 14px;
    }

    .justificante-leyenda {
        margin-top: 10px;
        padding-top: 8px;
    }

    /* Control de acceso */
    .ca-header .ca-header-logo {
        max-height: 32px !important;
    }

    .ca-header .ca-title-block h1 {
        font-size: 18px !important;
    }

    .ca-cabecera-opciones {
        margin-top: 12px !important;
    }

    .ca-header {
        padding: 8px 18px !important;
    }

    .ca-title-block p {
        font-size: 12px !important;
        margin: 2px 0 0 0 !important;
    }

    .ca-fecha {
        font-size: 12px !important;
    }

    .ca-reloj {
        font-size: 20px !important;
    }

    .ca-wrapper {
        margin-top: 14px !important;
        margin-bottom: 6px !important;
    }

    .ca-body {
        padding: 8px 14px 10px 14px !important;
    }

    .ca-sublabel {
        margin: 0 0 6px 0 !important;
        font-size: 13px !important;
    }

    .ca-grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .ca-card {
        padding: 6px 8px !important;
        min-height: 0 !important;
        gap: 3px !important;
    }

    .ca-card .ca-horario {
        min-height: 18px;
        gap: 3px 4px;
    }

    .ca-horario,
    .ca-horario-vacio,
    .ca-horario-turno {
        font-size: 10px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .ca-avatar {
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
        margin: 3px auto !important;
    }

    .ca-nombre {
        font-size: 12px !important;
        margin: 0 0 3px 0 !important;
        line-height: 1.2 !important;
    }

    .ca-incidencia-label {
        font-size: 10px !important;
        margin: 0 !important;
    }

    .ca-btn {
        min-height: 34px;
        padding: 4px 8px !important;
        font-size: 14px !important;
    }

    .ca-card .ca-btn {
        margin-top: auto !important;
    }

    .ca-mostrar-todos {
        margin: 4px 0 6px 0 !important;
    }

    .et-leyenda {
        margin: 0 0 6px 0 !important;
        font-size: 12px !important;
    }

    .ca-fila-superior {
        margin-top: 28px !important;
        margin-bottom: 12px !important;
        gap: 12px !important;
    }

    .ca-cabecera-opciones + .ca-fila-superior {
        margin-top: 12px !important;
    }

    .ca-fila-inferior {
        gap: 12px !important;
    }

    .ca-estado-header {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .ca-estado-header h2 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    .ca-estado-body {
        padding: 12px !important;
        gap: 8px;
    }

    .ca-estado-body .ca-estado-usuario {
        margin: 0 !important;
    }

    .ca-estado-btn {
        min-height: 42px;
        padding: 7px 12px !important;
        font-size: 15px !important;
    }

    .ca-caja-supervisor .ca-estado-body {
        gap: 8px;
    }

    .ca-volver-abajo {
        margin-top: 10px !important;
    }
}


/* ─────────────────────────────────────────────────────────
   TABLET EN VERTICAL (hasta 899px)
   ───────────────────────────────────────────────────────── */

@media (max-width: 899px) {

    .contenido.clientes {
        padding: 0 12px;
    }

    /* Formularios: 2 columnas y la dirección en 3 */
    #formulario-trabajador .form-grid-2,
    #formulario-empresa .form-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #formulario-trabajador .form-grid-3,
    #formulario-empresa .form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    #formulario-trabajador .panel-group > .panel .panel-body,
    #formulario-datos .panel-group > .panel .panel-body,
    #formulario-convenio .panel-group > .panel .panel-body,
    #formulario-jornada .panel-group > .panel .panel-body,
    #formulario-puesto .panel-group > .panel .panel-body,
    #formulario-empresa #accordion > .panel .panel-body {
        padding: 20px !important;
    }

    #formulario-jornada .panel-group > .panel .panel-body {
        padding: 16px !important;
    }

    /* Tablas */
    .tabla-convenios th,
    .tabla-convenios td {
        padding: 9px 8px !important;
        font-size: 13px !important;
    }

    .tabla-horario th:first-child {
        width: 18%;
    }

    .tabla-horario th,
    .tabla-horario td {
        padding: 6px 4px !important;
        font-size: 13px !important;
    }

    #formulario-jornada .tabla-horario input[type="time"].form-control {
        padding: 0 2px;
        font-size: 15px !important;
    }

    /* Informe de horas */
    .ih-barra-filtros {
        flex-direction: column;
        align-items: stretch;
    }

    .ih-filtros {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .ih-filtros .form-group:last-child {
        grid-column: 1 / -1;
    }

    .btn-accion.btn-pdf {
        justify-content: center;
        width: 100%;
    }

    .table-responsive .tabla-informe th,
    .table-responsive .tabla-informe td {
        padding: 9px 8px;
        font-size: 13px;
    }

    .tabla-informe {
        min-width: 760px;
    }

    /* Incidencias */
    .filtros-incidencias {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tabla-incidencias th,
    .tabla-incidencias td {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }

    .tabla-incidencias {
        min-width: 820px;
    }

    .inc-card {
        padding: 18px;
    }

    /* Horas extra */
    .he-barra-filtros {
        flex-direction: column;
        align-items: stretch;
    }

    .he-barra-filtros .sd-filtros {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .sd-filtro-campo,
    .sd-filtro-campo.sd-filtro-ancho {
        min-width: 0;
        max-width: none;
    }

    .sd-filtro-campo.sd-filtro-ancho {
        grid-column: 1 / -1;
    }

    .sd-btn-pdf {
        justify-content: center;
        width: 100%;
    }

    .he-resumen,
    .he-resumen.he-resumen-horas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-tabla-listado th,
    .sd-tabla-listado td {
        padding: 9px 8px !important;
        font-size: 13px !important;
    }

    .he-col-acciones {
        white-space: normal;
    }

    .he-col-acciones .sd-btn-aprobar,
    .he-col-acciones .sd-btn-denegar {
        display: block;
        width: 100%;
        margin: 0 0 6px 0;
    }

    /* Solicitar días: calendario arriba, selección y resumen debajo */
    .sd-body.sd-body-solicitud {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-areas:
            "cal cal"
            "sel res"
            "apr apr"
            "pen pen";
        gap: 16px !important;
    }

    .sd-cal-grid > div {
        height: 54px !important;
        font-size: 17px !important;
    }

    .sd-lista-dias {
        max-height: 160px;
    }

    /* Control de acceso: una caja debajo de otra */
    .ca-fila-superior,
    .ca-fila-inferior,
    .ca-volver-abajo,
    .ca-cabecera-opciones,
    form:not(:has(.ca-caja-supervisor)) > .ca-fila-superior,
    form:not(:has(.ca-caja-supervisor)) > .ca-fila-inferior,
    form:not(:has(.ca-caja-supervisor)) > .ca-volver-abajo,
    form:not(:has(.ca-caja-supervisor)) > .ca-cabecera-opciones {
        max-width: 640px !important;
    }

    .ca-fila-superior,
    .ca-fila-inferior,
    form:not(:has(.ca-caja-supervisor)) > .ca-fila-superior,
    form:not(:has(.ca-caja-supervisor)) > .ca-fila-inferior {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px !important;
    }

    .ca-fila-superior {
        margin-bottom: 16px !important;
    }
}


/* ─────────────────────────────────────────────────────────
   MÓVIL Y TABLET PEQUEÑA
   ───────────────────────────────────────────────────────── */

@media (max-width: 760px) {

    /* Mis datos */
    #formulario-datos .md-grid-2,
    #formulario-datos .md-grid-calle {
        grid-template-columns: minmax(0, 1fr);
    }

    #formulario-datos .md-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Gestionar trabajadores: aquí sí se permite el scroll lateral */
    .table-responsive:has(.tabla-trabajadores) {
        overflow-x: auto;
    }

    .tabla-trabajadores {
        table-layout: auto;
        min-width: 720px;
    }

    /* Justificantes: calendario y resumen uno debajo del otro */
    .sd-body:has(> .justificante-cal-card) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 600px) {

    .contenido.clientes {
        padding: 0 10px;
    }

    /* Cabeceras: logo y usuario arriba, título debajo */
    .contenido.clientes .ge-cabecera,
    .contenido.clientes .md-cabecera,
    .contenido.clientes .de-cabecera,
    .contenido.clientes .cv-cabecera,
    .contenido.clientes .jn-cabecera,
    .contenido.clientes .pt-cabecera,
    .contenido.clientes .ih-cabecera,
    .contenido.clientes .inc-cabecera {
        grid-template-columns: auto 1fr;
    }

    .contenido.clientes .information h3.ge-cabecera-titulo,
    .contenido.clientes .information h3.md-cabecera-titulo,
    .contenido.clientes .information h3.de-cabecera-titulo,
    .contenido.clientes .information h3.cv-cabecera-titulo,
    .contenido.clientes .information h3.jn-cabecera-titulo,
    .contenido.clientes .information h3.pt-cabecera-titulo,
    .contenido.clientes .information h3.ih-cabecera-titulo,
    .contenido.clientes .information h3.inc-cabecera-titulo {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .sd-wrapper {
        padding: 0 10px !important;
    }

    .sd-header,
    .ca-header {
        grid-template-columns: auto 1fr !important;
    }

    .sd-header .sd-title-block,
    .ca-header .ca-title-block {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    /* Botones "Nuevo / Añadir" a todo el ancho */
    .contenido.clientes .ge-barra-acciones .btn-nuevo-cabecera,
    .contenido.clientes .cv-barra-acciones .btn-nuevo-cabecera,
    .contenido.clientes .jn-barra-acciones .btn-nuevo-cabecera,
    .contenido.clientes .pt-barra-acciones .btn-nuevo-cabecera {
        width: 100%;
        justify-content: center;
    }

    /* Formularios en una columna */
    #formulario-trabajador .form-grid-2,
    #formulario-trabajador .dual_input,
    #formulario-empresa .form-grid-2,
    #formulario-empresa .dual_input,
    #formulario-convenio .cv-grid-3,
    .inc-card .form-grid-2 {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #formulario-trabajador .form-grid-3,
    #formulario-empresa .form-grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .tabla-convenios {
        table-layout: auto;
        min-width: 640px;
    }

    .tabla-horario {
        table-layout: auto;
        min-width: 560px;
    }

    .ih-filtros,
    .he-barra-filtros .sd-filtros {
        grid-template-columns: minmax(0, 1fr);
    }

    .filtros-incidencias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .he-resumen,
    .he-resumen.he-resumen-horas {
        grid-template-columns: minmax(0, 1fr);
    }

    .sd-body.sd-body-solicitud {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "cal"
            "sel"
            "res"
            "apr"
            "pen";
    }

    .sd-cal-grid > div {
        height: 42px !important;
        font-size: 15px !important;
    }

    .sd-col-acciones {
        white-space: normal;
    }

    .sd-col-acciones .sd-btn-aprobar,
    .sd-col-acciones .sd-btn-denegar {
        width: 100%;
        margin: 0 0 6px 0;
    }
}

@media (max-width: 560px) {
    .ca-caja-supervisor .ca-estado-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    #formulario-datos .md-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =====================================================================
   4.17 LOGO DE LA CABECERA (se adapta solo al logo de cada empresa)
   El JS (app_ControlHorario.js, apartado 1.9) mira el logo al cargar
   la página y le pone una de estas clases. La clase va repetida 3 veces
   a propósito: así gana a los estilos de cada vista que quitan el fondo
   al logo con !important.
   ===================================================================== */

/* Logo oscuro o de color: pastilla blanca para que se lea sobre el verde */
img.erp-logo-pastilla.erp-logo-pastilla.erp-logo-pastilla {
    background: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    box-sizing: content-box !important;
    max-height: 36px !important;
    width: auto !important;
}

/* Logo blanco o muy claro: se queda tal cual sobre el verde */
img.erp-logo-claro.erp-logo-claro.erp-logo-claro {
    background: none !important;
    padding: 0 !important;
}

/* Logo que ya trae su propio fondo: solo esquinas redondeadas */
img.erp-logo-con-fondo.erp-logo-con-fondo.erp-logo-con-fondo {
    padding: 0 !important;
    border-radius: 4px !important;
}


/* =====================================================================
   4.18 CAMPOS OBLIGATORIOS SIN RELLENAR
   El JS (app_ControlHorario.js, apartado 1.4) pone la clase .erp-validado
   al formulario cuando se intenta guardar con campos obligatorios vacíos.
   Solo entonces se marcan en rojo (no al cargar la página).
   ===================================================================== */

form.erp-validado .form-control:invalid,
form.erp-validado input:invalid,
form.erp-validado select:invalid {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}

/* Asterisco rojo de los campos obligatorios */
.erp-obligatorio {
    color: #dc2626;
    font-weight: 700;
    margin-left: 2px;
}


/* =====================================================================
   4.19 FLECHAS DE LOS PANELES
   La flecha mira hacia arriba SOLO si su panel está abierto de verdad
   (Bootstrap le pone la clase "in" al .panel-collapse). Ya no depende del
   atributo aria-expanded: la versión de Bootstrap del ERP no lo actualiza
   cuando cierra un panel automáticamente al abrir otro (data-parent), y
   por eso las flechas se quedaban hacia arriba con el panel cerrado.
   (Las reglas de los apartados 4.3 usan el mismo criterio: :has(.in)).
   ===================================================================== */
.panel-group .panel .panel-title i.fa-chevron-down {
    display: inline-block !important;          /* transform no funciona en elementos inline */
    transition: transform 0.35s ease !important; /* mismo tiempo que tarda Bootstrap en abrir */
}

/* La clase .erp-panel-abierto la pone el JS (apartado 1.4) en cuanto se
   pulsa: así la flecha gira A LA VEZ que se abre o se cierra el panel.
   :has(.in) queda de respaldo por si el JS no está cargado. */


/* =====================================================================
   4.20 ANIMACIÓN AL ABRIR / CERRAR PANELES
   Los paneles los abre y cierra app_ControlHorario.js (apartado 1.4) con
   las mismas clases que Bootstrap. Por si el CSS de Bootstrap no estuviera
   o tuviera otra duración, aquí se define la animación.
   ===================================================================== */
.panel-group .panel-collapse.collapse:not(.in):not(.show) {
    display: none;
}

.panel-group .panel-collapse.collapsing {
    display: block;
    overflow: hidden;
    transition: height 0.35s ease;
}


/* =====================================================================
   4.21 CABECERA "CONECTADO COMO" (Control de acceso)
   Vista: ERP_ControlAcceso.php -> caCabeceraOpciones()
   Cuando un supervisor entra en un trabajador desde "Estado de los
   trabajadores", la cabecera muestra dos líneas:
       Usuario: SUPERVISOR
       Conectado como: TRABAJADOR   (con fondo naranja suave)
   ===================================================================== */
.ca-header .ca-header-usuario.ca-header-conectado-como {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    line-height: 1.25;
}

.ca-header .ca-header-conectado-como .ca-header-como {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(243, 156, 18, 0.9);
    font-size: 13px;
}

@media (max-width: 600px) {
    .ca-header .ca-header-usuario.ca-header-conectado-como {
        align-items: center;
        white-space: normal;
    }
}

/* Resto de pantallas (lo pinta app_ControlHorario.js, apartado 1.10) */
.erp-conectado-como {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    line-height: 1.25;
    white-space: nowrap;
}

.erp-conectado-como .erp-linea-como {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(243, 156, 18, 0.9);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px;
}

.erp-conectado-como .erp-linea-como strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 600px) {
    .erp-conectado-como {
        align-items: center;
        white-space: normal;
    }
}


/* =====================================================================
   4.22 BOTÓN "ENVIAR URL" POR EMAIL (Gestionar trabajadores, listado)
   Vista: ERP_gestionarTrabajadores.php -> geEnlacesEnviarUrl()
   Abre el correo con el enlace directo de fichaje de cada trabajador.
   ===================================================================== */
.ge-enviar-url {
    display: inline-flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.ge-btn-enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    color: #ffffff !important;
    text-decoration: none !important;
}

button.ge-btn-enviar {
    border: none;
    padding: 0;
    cursor: pointer;
}

.ge-btn-enviar:hover,
.ge-btn-enviar:focus {
    filter: brightness(0.92);
    color: #ffffff !important;
}

.ge-btn-email {
    background: #2563eb;
}

/* Trabajador sin email: botón gris y sin acción */
.ge-btn-email.ge-btn-desactivado {
    background: #cbd5e1;
    cursor: not-allowed;
    filter: none;
}