/* =====================================================================
   Cuadrante — hoja de estilo

   Pensado para el móvil primero: la mayoría de la gente entra desde el
   taller o desde una obra, con guantes y a contraluz. De ahí los botones
   grandes, el contraste alto y nada de florituras.
   ===================================================================== */

:root {
    --fondo: #f5f6f8;
    --papel: #ffffff;
    --tinta: #1d2024;
    --tinta-suave: #5e6672;
    --linea: #d8dce2;
    --azul: #2969c8;
    --azul-oscuro: #1d4e99;
    --verde: #2f7d4f;
    --ambar: #a96a00;
    --rojo: #b3261e;

    --planificado: #6699d6;
    --encurso: #e8a23a;
    --finalizado: #60a86c;
    --anulado: #a0a0a0;

    --radio: 10px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #15171a;
        --papel: #1e2126;
        --tinta: #e8eaed;
        --tinta-suave: #a0a6b0;
        --linea: #343941;
        --azul: #5b96ef;
        --azul-oscuro: #3f7fdd;
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
    /* Deja sitio a la muesca de los móviles. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1 { font-size: 1.45rem; margin: 0 0 .2em; }
h2 { font-size: 1.1rem; margin: 1.6em 0 .5em; }

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

/* --- Estructura --- */

.cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 10;
}

.marca { font-weight: 700; text-decoration: none; color: var(--tinta); }

.menu { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }

.menu a {
    padding: .45rem .7rem;
    border-radius: var(--radio);
    text-decoration: none;
    color: var(--tinta-suave);
    white-space: nowrap;
}

.menu a:hover { background: var(--fondo); }

.menu a.active {
    background: var(--azul);
    color: #fff;
}

.quien {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .85rem;
    color: var(--tinta-suave);
}

.salir {
    border: 1px solid var(--linea);
    background: none;
    color: var(--tinta-suave);
    border-radius: var(--radio);
    padding: .35rem .7rem;
    cursor: pointer;
    font-size: .85rem;
}

.contenido { padding: 1rem; max-width: 1200px; margin: 0 auto; }

.marco-vacio .contenido { max-width: 420px; padding-top: 3rem; }

/* --- Avisos --- */

.aviso {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio);
    padding: .8rem 1rem;
    margin: 1rem 0;
}

.aviso-error     { border-left-color: var(--rojo); }
.aviso-atencion  { border-left-color: var(--ambar); }
.aviso-bien      { border-left-color: var(--verde); }

.error { color: var(--rojo); font-weight: 600; }
.cargando, .vacio, .pie { color: var(--tinta-suave); }
.pie { font-size: .85rem; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 1rem; }

.clave {
    font: 700 1.6rem/1.3 Consolas, "Courier New", monospace;
    letter-spacing: .08em;
    background: var(--fondo);
    padding: .5rem .8rem;
    border-radius: var(--radio);
    display: inline-block;
    user-select: all;
}

/* --- Botones --- */

.boton {
    display: inline-block;
    padding: .6rem 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
    color: var(--tinta);
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
    /* Objetivo táctil cómodo con guantes. */
    min-height: 44px;
    line-height: 1.6;
}

.boton:hover { border-color: var(--azul); }
.boton:disabled { opacity: .5; cursor: default; }

.boton-principal {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
    font-weight: 600;
}

.boton-principal:hover { background: var(--azul-oscuro); }

.boton-plano { padding: .4rem .7rem; min-height: 38px; font-size: .9rem; }

/* --- Acceso --- */

.acceso { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.5rem; }
.acceso h1 { text-align: center; margin-bottom: 1.2rem; }

label { display: block; margin: 0 0 1rem; font-size: .9rem; color: var(--tinta-suave); }

input, select, textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .65rem .8rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
    color: var(--tinta);
    /* 16px evita que el iPhone haga zoom al enfocar. */
    font-size: 16px;
    font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

.acceso .boton { width: 100%; }

/* --- Listas de trabajos --- */

.barra-dia { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; }
.fechas { display: flex; gap: .35rem; }

.tarjetas { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }

.tarjeta {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 5px solid var(--planificado);
    border-radius: var(--radio);
    padding: .8rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--sombra);
}

.tarjeta:hover { border-color: var(--azul); }

.estado-encurso    { border-left-color: var(--encurso); }
.estado-finalizado { border-left-color: var(--finalizado); }
.estado-anulado    { border-left-color: var(--anulado); opacity: .65; }

.tarjeta-mal      { border-left-color: var(--rojo); }
.tarjeta-atencion { border-left-color: var(--ambar); }

.tarjeta-hora { font-weight: 700; white-space: nowrap; font-size: .9rem; }
.tarjeta-cuerpo { flex: 1; min-width: 0; }
.tarjeta-titulo { font-weight: 600; }
.tarjeta-dato { color: var(--tinta-suave); font-size: .88rem; }
.tarjeta-tipo { font-size: .75rem; color: var(--tinta-suave); text-transform: uppercase; }

.urgente {
    background: var(--rojo);
    color: #fff;
    font-size: .7rem;
    padding: .1rem .4rem;
    border-radius: 4px;
    margin-right: .4rem;
    text-transform: uppercase;
}

.dia { text-transform: capitalize; }

/* --- Ficha de trabajo --- */

.ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem 1rem; }
.ficha-linea { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linea); }
.ficha-linea:last-child { border-bottom: none; }
.ficha-linea span { color: var(--tinta-suave); min-width: 100px; font-size: .88rem; }

.apuntar { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; }
.apuntar-botones { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; }

/* El input de fichero real se esconde; se pulsa la etiqueta. */
.foto input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.boton-foto { display: inline-block; }

.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.nota {
    background: var(--papel);
    border: 1px solid var(--linea);
    border-left: 4px solid var(--linea);
    border-radius: var(--radio);
    padding: .7rem .9rem;
}

.nota-visita { border-left-color: var(--verde); }
.nota-cabecera { display: flex; gap: .6rem; align-items: center; font-size: .85rem; color: var(--tinta-suave); }
.nota-texto { margin-top: .3rem; white-space: pre-wrap; }

.adjunto { display: inline-block; margin-top: .4rem; margin-right: .5rem; font-size: .9rem; }

.etiqueta { font-size: .7rem; background: var(--fondo); padding: .1rem .4rem; border-radius: 4px; text-transform: uppercase; }
.etiqueta-bien { background: var(--verde); color: #fff; }
.etiqueta-mal  { background: var(--rojo); color: #fff; }

/* --- Tablas --- */

.tabla { width: 100%; border-collapse: collapse; background: var(--papel); border-radius: var(--radio); overflow: hidden; }
.tabla th, .tabla td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--linea); }
.tabla th { background: var(--fondo); font-size: .85rem; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .negativo { color: var(--rojo); }
.tabla tr.inactivo { opacity: .55; }
.acciones { display: flex; gap: .3rem; flex-wrap: wrap; }

.alta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem 1rem; margin: 1rem 0; }
.alta summary { cursor: pointer; font-weight: 600; }
.alta-cuerpo { margin-top: 1rem; max-width: 420px; }

/* --- Rejilla del cuadrante --- */

.rejilla-envoltorio { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--papel); }
.rejilla { border-collapse: collapse; min-width: 900px; width: 100%; }
.rejilla th, .rejilla td { border: 1px solid var(--linea); padding: .4rem; vertical-align: top; font-size: .85rem; }
.rejilla thead th { background: var(--fondo); text-align: center; position: sticky; top: 0; }
.rejilla th.fija { text-align: left; min-width: 140px; background: var(--fondo); }
.rejilla th.hoy { background: var(--azul); color: #fff; }
.rejilla small { color: var(--tinta-suave); font-weight: 400; }

.celda-trabajo {
    display: block;
    margin-bottom: .25rem;
    padding: .25rem .4rem;
    border-radius: 5px;
    border-left: 3px solid var(--planificado);
    background: var(--fondo);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.celda-hora { font-weight: 600; }

.celda-ausencia {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--tinta-suave);
    background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--linea) 4px, var(--linea) 5px);
    padding: .2rem .3rem;
    border-radius: 4px;
}

/* --- Móvil --- */

@media (max-width: 640px) {
    /* En movil la cabecera va en dos filas fijas: marca y salir arriba,
       menu debajo. Con flex-wrap los elementos se entremezclaban. */
    .cabecera {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas: "marca quien" "menu menu";
        gap: .5rem;
        padding: .5rem .7rem;
    }
    .marca { grid-area: marca; align-self: center; }
    .quien { grid-area: quien; }
    .menu  { grid-area: menu; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .15rem; }
    .menu a { flex: 0 0 auto; }
    .contenido { padding: .7rem; }
    .quien span { display: none; }
    .ficha-linea { flex-direction: column; gap: .1rem; }
    .ficha-linea span { min-width: 0; }
    .apuntar-botones .boton { flex: 1; }
}

/* --- Alta y edición de trabajos --- */

.formulario { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem; display: grid; gap: .9rem; max-width: 640px; }
.campo { display: grid; gap: .3rem; margin: 0; border: none; padding: 0; }
.campo > span, .campo > legend { color: var(--tinta-suave); font-size: .88rem; padding: 0; }
.campo input[type=text], .campo input[type=date], .campo input[type=time], .campo select, .campo textarea {
    font: inherit; padding: .55rem .6rem; min-height: 44px; border: 1px solid var(--linea); border-radius: 6px; background: var(--fondo); color: var(--tinta); color-scheme: light dark; width: 100%; box-sizing: border-box;
}
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.campo-marca { display: flex; align-items: center; gap: .5rem; min-height: 40px; cursor: pointer; }
.campo-marca input { width: 20px; height: 20px; }
.lista-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .1rem .8rem; max-height: 260px; overflow-y: auto; }
.boton-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }

/* El "+" de cada casilla del cuadrante: discreto hasta pasar por encima. */
.celda-nuevo { display: block; text-align: center; color: var(--tinta-suave); text-decoration: none; opacity: .35; border-radius: 4px; }
.celda-nuevo:hover, .celda-nuevo:focus { opacity: 1; background: var(--linea); }