/* ════════════════════════════════════════════════════════════════════════
   PERSONAL · estilos propios de la página unificada
   ------------------------------------------------------------------------
   Se apoya en vacaciones.css (layout, calendario, tablas, modales) y en
   trabajadores-documentos.css (fichas de EPI y firma). Aquí solo va lo
   nuevo: las tarjetas de ficha de trabajador y los retoques de la fusión.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Contador en la pestaña ── */
.tab-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px;
    border-radius: 9px; background: #ef4444; color: #fff;
    font-size: 0.68rem; font-weight: 800;
}

/* Los iconos de rol en la barra lateral */
.mini-rol { font-size: 0.65rem; color: #94a3b8; margin-left: 4px; }

/* ── Tarjetas de ficha ── */
.fichas-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 0.9rem; padding: 0.2rem;
}
.ficha-card {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.65rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
    transition: box-shadow .15s, transform .15s;
}
.ficha-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .10); transform: translateY(-1px); }

.ficha-head { display: flex; align-items: center; gap: 0.7rem; }
.ficha-foto, .ficha-head .worker-avatar-icon {
    width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
    background: #eef2f7; color: #64748b;
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.ficha-id { min-width: 0; }
.ficha-nombre {
    font-weight: 700; color: #111827; font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ficha-dni { font-size: 0.76rem; color: #9ca3af; font-family: monospace; }

.ficha-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
    font-size: 0.66rem; font-weight: 700; padding: 2px 8px; border-radius: 50px;
    display: inline-flex; align-items: center; gap: 4px;
}
.chip-azul    { background: #dbeafe; color: #1d4ed8; }
.chip-verde   { background: #d1fae5; color: #047857; }
.chip-morado  { background: #ede9fe; color: #6d28d9; }
.chip-naranja { background: #ffedd5; color: #c2410c; }
.chip-gris    { background: #f1f5f9; color: #64748b; }

.ficha-datos { display: flex; flex-direction: column; gap: 3px; }
.ficha-datos > div {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 0.8rem; padding: 2px 0; border-bottom: 1px dashed #f1f5f9;
}
.ficha-datos > div:last-child { border-bottom: none; }
.ficha-datos span   { color: #9ca3af; }
.ficha-datos strong { color: #374151; }

.ficha-foot { display: flex; justify-content: flex-end; }

/* ── Permisos en el formulario de ficha ── */
.perm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.8rem; }
.perm-grid .checkbox-label { font-size: 0.84rem; }
.perm-grid .checkbox-label small { color: #9ca3af; font-weight: 400; }
.perm-grid i { width: 16px; text-align: center; color: #6b7280; margin-right: 3px; }

.foto-fila { display: flex; align-items: center; gap: 0.8rem; }
.foto-preview {
    width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    background: #eef2f7; color: #94a3b8;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }

/* ── Selector de ventanas del inicio ── */
.ventanas-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.8rem;
    max-height: 220px; overflow-y: auto;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.6rem 0.75rem;
    background: #f8fafc;
}
.ventana-op { font-size: 0.82rem; }
.ventana-op i { width: 16px; text-align: center; color: #6b7280; margin-right: 3px; }

/* ── Errores en modales ── */
.personal-error {
    background: #fee2e2; border: 1px solid #fecaca; color: #b91c1c;
    border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.83rem; margin-bottom: 0.6rem;
}

/* ── Aviso flotante (mismo estilo que en Flota) ── */
.flota-toast {
    position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 20px);
    background: #111827; color: #fff; padding: 0.7rem 1.1rem; border-radius: 10px;
    font-size: 0.86rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
    z-index: 4000; max-width: 90vw; text-align: center;
}
.flota-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.flota-toast.ok    { background: #047857; }
.flota-toast.error { background: #b91c1c; }

/* ── La barra de acciones tiene más botones que antes ── */
.vac-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
#yearCtrl { transition: visibility .1s; }

@media (max-width: 820px) {
    .perm-grid { grid-template-columns: 1fr; }
    .fichas-grid { grid-template-columns: 1fr; }
}

/* ─── Carnets del conductor (ficha) ─── */
.carnets-lista { display: flex; flex-direction: column; gap: 0.4rem; }
.carnet-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap;
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.5rem 0.7rem;
    background: #fafafa; transition: background .15s, border-color .15s;
}
.carnet-fila.tiene { background: #f0fdf4; border-color: #bbf7d0; }
.carnet-fila .checkbox-label { font-size: 0.85rem; margin: 0; }
.carnet-fila .checkbox-label small { color: #9ca3af; font-weight: 400; }
.carnet-fila i { width: 16px; text-align: center; color: #6b7280; margin-right: 3px; }
.carnet-fecha { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #6b7280; }
.carnet-fecha input[type="date"] {
    border: 1px solid #d1d5db; border-radius: 7px; padding: 0.28rem 0.45rem;
    font-size: 0.8rem; color: #374151;
}
.carnet-fecha input[type="date"]:disabled { background: #f3f4f6; color: #9ca3af; }
.carnet-estado { font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.carnet-bien   { color: #15803d; }
.carnet-pronto { color: #b45309; }
.carnet-mal    { color: #b91c1c; }

/* ── Buzones de correo de cada persona (mismo aire que los carnets) ── */
.correos-lista { display: flex; flex-direction: column; gap: 0.4rem; }
.correo-fila {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    flex-wrap: wrap;
    border: 1px solid #e5e7eb; border-radius: 10px; padding: 0.5rem 0.7rem;
    background: #fafafa; transition: background .15s, border-color .15s;
}
.correo-fila.tiene { background: #eff6ff; border-color: #bfdbfe; }
.correo-fila .checkbox-label { font-size: 0.85rem; margin: 0; }
.correo-fila .checkbox-label small { color: #9ca3af; font-weight: 400; }
.correo-fila i { width: 16px; text-align: center; color: #6b7280; margin-right: 3px; }
.correo-clave { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.clave-oculta {
    font-family: 'Consolas', monospace; letter-spacing: 1px; color: #374151;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0.2rem 0.5rem;
    min-width: 90px; text-align: center; user-select: all;
}
.clave-sin { color: #b45309; font-size: 0.75rem; }
.btn-ver-clave {
    border: 1px solid #d1d5db; background: #fff; border-radius: 7px;
    width: 28px; height: 28px; cursor: pointer; color: #6b7280;
}
.btn-ver-clave:hover { background: #f3f4f6; color: #1f2937; }
.correos-cargando, .correos-vacio { font-size: 0.82rem; color: #9ca3af; padding: 0.4rem 0; }

@media (max-width: 640px) {
    .carnet-fila { flex-direction: column; align-items: flex-start; }
    .carnet-fecha { width: 100%; }
    .correo-fila { flex-direction: column; align-items: flex-start; }
}

/* ─── El guion del reparto automático ───
   No es una tabla ni un formulario: es un texto largo que se lee y se
   escribe. Por eso ocupa el ancho entero y la letra es de leer, no de
   rellenar casillas. */
.guion-aviso {
    display: flex; gap: 0.7rem; align-items: flex-start;
    margin: 0 1rem 0.9rem; padding: 0.8rem 1rem;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
    font-size: 0.85rem; color: #1e3a8a; line-height: 1.5;
}
.guion-aviso > i { color: #2563eb; margin-top: 2px; font-size: 1rem; }
.guion-caja { padding: 0 1rem; }
.guion-textarea {
    width: 100%; resize: vertical; min-height: 380px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem; line-height: 1.6;
    padding: 0.9rem 1rem; border-radius: 10px; border: 1px solid #d1d5db;
    background: #fcfcfd; color: #111827;
}
.guion-textarea:focus { border-color: #2563eb; outline: none; background: #fff; }
.guion-barra {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem 1rem 1.1rem;
}
.guion-info { font-size: 0.8rem; color: #6b7280; }
.guion-sucio { color: #b45309; font-weight: 600; }
.guion-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-guion-sec {
    background: #fff; color: #374151; border: 1px solid #d1d5db;
    border-radius: 8px; padding: 0.5rem 0.9rem; font-size: 0.83rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-guion-sec:hover { background: #f3f4f6; border-color: #9ca3af; }

@media (max-width: 700px) {
    .guion-textarea { min-height: 300px; font-size: 16px; }  /* 16px: iOS no hace zoom */
    .guion-barra { flex-direction: column; align-items: stretch; }
    .guion-botones { justify-content: stretch; }
    .guion-botones button { flex: 1; justify-content: center; }
}

/* ─── Conductores que solo salen con los suyos ───
   El orden manda (se le da el primero que esté disponible), así que cada
   marcado lleva su número: no es una lista de casillas sueltas. */
.vehiculos-suyos { display: flex; flex-direction: column; gap: 4px; margin-top: 0.35rem; }
.vehiculo-suyo {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 9px; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #fafafa; cursor: pointer; font-size: 0.83rem;
}
.vehiculo-suyo:hover { background: #f1f5f9; }
.vehiculo-suyo.marcado { background: #eff6ff; border-color: #93c5fd; }
.vehiculo-orden {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #2563eb; color: #fff; font-size: 11px; font-weight: 800;
}
.vehiculo-orden.vacio { background: transparent; }
.vehiculo-chapa { font-weight: 700; color: #1e293b; font-family: ui-monospace, Consolas, monospace; }
.vehiculo-desc { color: #64748b; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }