/* =====================================================================
   Atención UDP — Hoja de estilos básica compartida
   ===================================================================== */

:root {
    --color-primario: #0b5c8a;
    --color-primario-oscuro: #08425f;
    --color-secundario: #f2a900;
    --color-exito: #1e8e3e;
    --color-error: #c0392b;
    --color-gris-claro: #f4f6f8;
    --color-gris-borde: #d7dee3;
    --color-texto: #23303a;
    --radio: 8px;
    --sombra: 0 2px 8px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    background: var(--color-gris-claro);
    color: var(--color-texto);
}

a { color: inherit; text-decoration: none; }

/* ---------------------------- Barra superior ---------------------------- */
.barra-superior {
    background: var(--color-primario);
    color: #fff;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--sombra);
}

.barra-superior .marca {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.barra-superior nav a {
    color: #fff;
    margin-left: 16px;
    opacity: 0.9;
}
.barra-superior nav a:hover { opacity: 1; text-decoration: underline; }

.usuario-sesion {
    font-size: 0.85rem;
    opacity: 0.95;
    margin-right: 16px;
}

/* ------------------------------ Contenedor ------------------------------ */
.contenedor {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}

.titulo-pagina { margin-bottom: 4px; }
.subtitulo { color: #5b6b76; margin-top: 0; }

/* -------------------------------- Tarjetas ------------------------------- */
.grid-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.tarjeta-modulo {
    background: #fff;
    border: 1px solid var(--color-gris-borde);
    border-radius: var(--radio);
    padding: 24px 16px;
    text-align: center;
    box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tarjeta-modulo:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.tarjeta-icono { font-size: 2.2rem; display: block; margin-bottom: 8px; }
.tarjeta-titulo { font-weight: 600; }

/* --------------------------------- Cajas --------------------------------- */
.caja {
    background: #fff;
    border: 1px solid var(--color-gris-borde);
    border-radius: var(--radio);
    padding: 20px;
    box-shadow: var(--sombra);
    margin-bottom: 20px;
}

/* -------------------------------- Botones -------------------------------- */
.btn {
    display: inline-block;
    border: none;
    border-radius: var(--radio);
    padding: 9px 18px;
    font-size: 0.95rem;
    cursor: pointer;
    background: var(--color-primario);
    color: #fff;
    transition: background .15s ease;
}
.btn:hover { background: var(--color-primario-oscuro); }
.btn:disabled { background: #a9b6bd; cursor: not-allowed; }
.btn-secundario { background: #6c757d; }
.btn-secundario:hover { background: #565e64; }
.btn-exito { background: var(--color-exito); }
.btn-exito:hover { background: #166b30; }
.btn-peligro { background: var(--color-error); }
.btn-peligro:hover { background: #922b21; }
.btn-pequeno { padding: 5px 10px; font-size: 0.8rem; }
.btn-bloque { display: block; width: 100%; }

/* -------------------------------- Formularios ----------------------------- */
label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 0.9rem; }
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], select, textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--color-gris-borde);
    border-radius: var(--radio);
    font-size: 0.95rem;
}
textarea { resize: vertical; min-height: 60px; }
.campo-password-wrapper { position: relative; }
.campo-password-wrapper input { padding-right: 40px; }
.icono-mostrar-password {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    cursor: pointer; user-select: none; font-size: 0.85rem; color: var(--color-primario);
}
.texto-ayuda { font-size: 0.78rem; color: #6c757d; margin-top: 2px; }
.mensaje-error-campo { color: var(--color-error); font-size: 0.8rem; margin-top: 3px; }

/* --------------------------------- Tablas --------------------------------- */
table.tabla-datos { width: 100%; border-collapse: collapse; }
table.tabla-datos th, table.tabla-datos td {
    padding: 9px 10px; border-bottom: 1px solid var(--color-gris-borde); text-align: left; font-size: 0.9rem;
}
table.tabla-datos th { background: var(--color-gris-claro); font-weight: 600; }
table.tabla-datos tr:hover { background: #fafcfd; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.78rem; font-weight: 600; }
.badge-activo { background: #d7f3dd; color: var(--color-exito); }
.badge-inactivo { background: #f5d7d3; color: var(--color-error); }
.badge-rol { background: #e2eef5; color: var(--color-primario); }
.badge-pendiente { background: #fdecc8; color: #8a5a00; }
.badge-atendido { background: #d7f3dd; color: var(--color-exito); }
.badge-nsp { background: #f5d7d3; color: var(--color-error); }
.badge-anulado { background: #e2e3e5; color: #41464b; }

.barra-acciones { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.buscador { max-width: 280px; }

.paginacion { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.paginacion button {
    border: 1px solid var(--color-gris-borde); background: #fff; border-radius: 6px;
    padding: 6px 11px; cursor: pointer; font-size: 0.85rem;
}
.paginacion button.activo { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }

/* -------------------------------- Modales --------------------------------- */
.fondo-modal {
    display: none; position: fixed; inset: 0; background: rgba(10, 20, 30, 0.55);
    align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.fondo-modal.activo { display: flex; }
.modal {
    background: #fff; border-radius: var(--radio); width: 100%; max-width: 480px;
    max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.modal-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--color-gris-borde); }
.modal-cabecera h3 { margin: 0; }
.modal-cerrar { cursor: pointer; font-size: 1.3rem; background: none; border: none; color: #888; }
.modal-cuerpo { padding: 16px 20px; }
.modal-pie { padding: 14px 20px; border-top: 1px solid var(--color-gris-borde); display: flex; justify-content: flex-end; gap: 10px; }

/* ------------------------------- Calendario -------------------------------- */
.calendario { max-width: 380px; user-select: none; }
.calendario-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.calendario-cabecera button { background: var(--color-primario); color: #fff; border: none; border-radius: 6px; width: 30px; height: 30px; cursor: pointer; }
.calendario-mes-anio { font-weight: 600; }
.calendario-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendario-diasemana { text-align: center; font-size: 0.75rem; font-weight: 600; color: #6c757d; padding-bottom: 4px; }
.calendario-dia {
    text-align: center; padding: 8px 0; border-radius: 6px; font-size: 0.85rem; cursor: pointer;
    background: #eef3f6; border: 1px solid transparent;
}
.calendario-dia.vacio { background: transparent; cursor: default; }
.calendario-dia.deshabilitado { color: #bcc6cc; background: #f4f6f8; cursor: not-allowed; }
.calendario-dia.hoy { border-color: var(--color-primario); font-weight: 700; }
.calendario-dia.con-info { background: #cfe6f2; font-weight: 600; }
.calendario-dia.seleccionado { background: var(--color-primario); color: #fff; }
.calendario-dia:not(.deshabilitado):not(.vacio):hover { background: #d7e9f2; }

/* -------------------------------- Bloques --------------------------------- */
.grid-bloques { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 14px 0; }
.bloque-horario {
    border: 1px solid var(--color-gris-borde); border-radius: var(--radio); padding: 10px; text-align: center;
    background: #fff; cursor: pointer;
}
.bloque-horario .hora { font-weight: 600; display: block; }
.bloque-horario .etiqueta { font-size: 0.78rem; display: block; margin-top: 4px; }
.bloque-horario.disponible { border-color: var(--color-exito); }
.bloque-horario.disponible .etiqueta { color: var(--color-exito); }
.bloque-horario.programado, .bloque-horario.citado { background: #eceff1; color: #8a97a0; cursor: not-allowed; }
.bloque-horario.seleccionado { background: var(--color-primario); color: #fff; }
.bloque-horario.seleccionado .etiqueta { color: #fff; }

/* -------------------------------- Utilidades ------------------------------- */
.oculto { display: none !important; }
.texto-centro { text-align: center; }
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.solo-lectura { background: #f4f6f8; }
.aviso {
    padding: 10px 14px; border-radius: var(--radio); font-size: 0.9rem; margin-bottom: 14px;
}
.aviso-error { background: #fbe4e1; color: var(--color-error); border: 1px solid #f0b8b1; }
.aviso-exito { background: #dff3e3; color: var(--color-exito); border: 1px solid #b6e3c2; }
.aviso-info { background: #e2eef5; color: var(--color-primario); border: 1px solid #b7d7e8; }

/* ------------------------------- Pantalla login ----------------------------- */
.pantalla-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
}
.tarjeta-login {
    background: #fff; border-radius: 12px; padding: 36px 32px; width: 100%; max-width: 380px;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
}
.tarjeta-login h1 { text-align: center; font-size: 1.4rem; margin-bottom: 4px; }
.tarjeta-login .lema { text-align: center; color: #6c757d; margin-top: 0; margin-bottom: 20px; font-size: 0.85rem; }

/* -------------------------------- Impresión -------------------------------- */
.comprobante { max-width: 480px; margin: 30px auto; background: #fff; padding: 26px; border: 1px solid var(--color-gris-borde); border-radius: var(--radio); }
.comprobante h2 { text-align: center; margin-top: 0; }
.comprobante .fila { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--color-gris-borde); }
.comprobante .fila span:first-child { color: #6c757d; }
.comprobante .codigo { text-align: center; font-size: 1.3rem; font-weight: 700; letter-spacing: 1px; margin: 14px 0; color: var(--color-primario); }

@media print {
    .no-imprimir { display: none !important; }
    body { background: #fff; }
    .comprobante, .hoja-impresion { box-shadow: none; border: none; margin: 0; }
}

@media (max-width: 640px) {
    .barra-superior { flex-direction: column; align-items: flex-start; gap: 8px; }
}