@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root {
    --bg: #FAF8F3;
    --surface: #FFFFFF;
    --ink: #1C2521;
    --steel: #5B6B66;
    --steel-light: #8A9690;
    --border: #E4E0D6;
    --verde: #2F6B4F;
    --verde-bg: #E7F0EA;
    --amber: #C97A2B;
    --amber-bg: #FBEEE0;
    --rojo: #B23B3B;
    --rojo-bg: #FBE9E9;

    --tile-sage-bg: #E8EDE3;
    --tile-sage-ink: #5C7560;
    --tile-sand-bg: #F3EFDD;
    --tile-sand-ink: #91793C;
    --tile-dusk-bg: #E6E3EF;
    --tile-dusk-ink: #6B5F8C;
    --tile-clay-bg: #F0E4D8;
    --tile-clay-ink: #8B6347;
    --tile-red-bg: #FBE9E9;
    --tile-red-ink: #B23B3B;
    --tile-amber-bg: #FBEEE0;
    --tile-amber-ink: #C97A2B;
    --tile-blue-bg: #E3EDF8;
    --tile-blue-ink: #3A6FA8;
    --tile-teal-bg: #DFF0EC;
    --tile-teal-ink: #2A7A6A;
    --tile-green-bg: #E7F0EA;
    --tile-green-ink: #2F6B4F;
    --tile-orange-bg: #FDEADE;
    --tile-orange-ink: #C4601A;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    padding: 16px;
    padding-bottom: 60px;
}

button { font-family: inherit; }

a { text-decoration: none; }

/* ---------- Contenedores de página ---------- */

.wrap { max-width: 480px; margin: 0 auto; }

@media (min-width: 780px) {
    .wrap { max-width: 900px; }
    .page-card { max-width: 900px; }
    .modulos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .info-row { max-width: 600px; }
    .estado-card { max-width: 600px; }
}

.page-card {
    background: var(--surface);
    max-width: 480px;
    margin: 0 auto;
    border-radius: 12px;
    padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(28, 37, 33, 0.06);
}

/* ---------- Tipografía ---------- */

h1, .page-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.subtitle {
    font-size: 13px;
    color: var(--steel);
    margin-bottom: 18px;
}

h2, .section-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 20px 0 10px;
}

/* ---------- Formularios ---------- */

label {
    display: block;
    font-size: 13px;
    color: var(--steel);
    margin-bottom: 4px;
}

input, select, textarea {
    width: 100%;
    padding: 11px 12px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 14px;
    background: var(--surface);
    color: var(--ink);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--verde);
}

textarea { resize: vertical; }

/* ---------- Botones ---------- */

.btn-primary, .guardar, .añadir, .nuevo {
    display: block;
    width: 100%;
    padding: 13px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    letter-spacing: 0.02em;
}

.btn-secundario {
    display: block;
    width: 100%;
    padding: 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

/* ---------- Mensajes ---------- */

.error {
    background: var(--rojo-bg);
    color: var(--rojo);
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.success {
    background: var(--verde-bg);
    border: 1px solid var(--verde);
    color: var(--verde);
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 14px;
}

/* ---------- Pills de estado (activo/inactivo) ---------- */

.estado-pill, .pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.estado-activo, .pill-activa { background: var(--verde-bg); color: var(--verde); }
.estado-inactivo, .pill-inactiva { background: var(--border); color: var(--steel); }

/* ---------- Filas de lista genéricas (admin) ---------- */

.lista { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }

.cliente-card, .camara-row, .doc-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
}

.cliente-card { border-radius: 10px; }
.camara-row, .doc-row { display: flex; justify-content: space-between; align-items: center; }

.fila-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.nombre { font-size: 15px; font-weight: 600; color: var(--ink); }
.tipo { font-size: 12px; color: var(--steel); margin-top: 2px; }
.detalle { font-size: 13px; color: var(--steel); margin-top: 8px; }
.detalle a { color: var(--verde); }

.top { display: flex; justify-content: space-between; align-items: center; max-width: 480px; margin: 0 auto 16px; }
.top .nuevo { width: auto; padding: 8px 14px; font-size: 13px; }

.vacio, .vacio-card {
    text-align: center;
    color: var(--steel-light);
    font-size: 14px;
    padding: 40px 20px;
}
.vacio svg, .vacio-card svg { width: 32px; height: 32px; stroke: var(--steel-light); margin-bottom: 10px; }

.vacio-card { background: var(--verde-bg); color: var(--verde); border-radius: 12px; padding: 26px 20px; font-weight: 500; }

a.volver, a.logout {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: var(--steel);
    font-size: 13px;
}

/* ---------- Cabecera de app (cliente) ---------- */

header.app-header { margin-bottom: 18px; }
header.app-header .negocio {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    font-weight: 600;
}
header.app-header .fecha {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--steel);
    margin-top: 2px;
}

/* ---------- Tarjeta de estado / semáforo ---------- */

.estado-card {
    border-radius: 16px;
    padding: 26px 20px;
    text-align: center;
    margin-bottom: 18px;
}
.estado-card.tono-verde { background: var(--verde-bg); }
.estado-card.tono-amber { background: var(--amber-bg); }
.estado-card.tono-rojo { background: var(--rojo-bg); }

.estado-dot { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; }
.estado-dot.tono-verde { background: var(--verde); }
.estado-dot.tono-amber { background: var(--amber); }
.estado-dot.tono-rojo { background: var(--rojo); }

.estado-card .titulo { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 600; }
.estado-card .detalle { font-size: 14px; opacity: 0.85; margin-top: 4px; }
.estado-card.tono-verde .titulo, .estado-card.tono-verde .detalle { color: var(--verde); }
.estado-card.tono-amber .titulo, .estado-card.tono-amber .detalle { color: var(--amber); }
.estado-card.tono-rojo .titulo, .estado-card.tono-rojo .detalle { color: var(--rojo); }

.info-row {
    display: flex;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    font-size: 14px;
}
.info-row .label { color: var(--steel); }
.info-row .valor { font-family: 'JetBrains Mono', monospace; font-weight: 500; }

/* ---------- Navegación de módulos ---------- */

.modulo-link, .modulo-link:visited {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 8px;
    color: var(--ink);
    transition: transform 0.1s ease, border-color 0.15s ease;
}
.modulo-link:active { transform: scale(0.98); border-color: var(--steel-light); }
.modulo-link .icono {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
}
.modulo-link .icono svg { width: 19px; height: 19px; stroke: var(--verde); }
.modulo-link .texto-modulo { display: flex; align-items: center; flex: 1; min-width: 0; }
.modulo-link .nombre { font-size: 15px; font-weight: 500; }
.modulo-link .flecha { color: var(--steel-light); }
.modulo-link.proximamente { opacity: 0.55; pointer-events: none; }

.badge-pronto {
    font-size: 10px;
    background: var(--border);
    color: var(--steel);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}

/* ---------- Rejilla de módulos (Inicio) ---------- */

.modulos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.modulo-tile, .modulo-tile:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    min-height: 108px;
    padding: 18px 10px;
    border-radius: 16px;
    color: var(--ink);
    transition: transform 0.1s ease;
}
.modulo-tile:active { transform: scale(0.96); }
.modulo-tile .icono-tile {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modulo-tile .icono-tile svg { width: 21px; height: 21px; }
.modulo-tile .nombre-tile { font-size: 13px; font-weight: 600; line-height: 1.3; }
.modulo-tile .ultima-vez { font-size: 10px; opacity: 0.75; margin-top: 3px; }

.alerta-rango {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--rojo-bg);
    border: 1px solid var(--rojo);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--rojo);
}
.alerta-rango svg { width: 18px; height: 18px; stroke: var(--rojo); flex-shrink: 0; }

.tile-sage { background: var(--tile-sage-bg); }
.tile-sage .icono-tile svg { stroke: var(--tile-sage-ink); }
.tile-sand { background: var(--tile-sand-bg); }
.tile-sand .icono-tile svg { stroke: var(--tile-sand-ink); }
.tile-dusk { background: var(--tile-dusk-bg); }
.tile-dusk .icono-tile svg { stroke: var(--tile-dusk-ink); }
.tile-clay { background: var(--tile-clay-bg); }
.tile-clay .icono-tile svg { stroke: var(--tile-clay-ink); }
.tile-red { background: var(--tile-red-bg); }
.tile-red .icono-tile svg { stroke: var(--tile-red-ink); }
.tile-amber { background: var(--tile-amber-bg); }
.tile-amber .icono-tile svg { stroke: var(--tile-amber-ink); }
.tile-blue { background: var(--tile-blue-bg); }
.tile-blue .icono-tile svg { stroke: var(--tile-blue-ink); }
.tile-teal { background: var(--tile-teal-bg); }
.tile-teal .icono-tile svg { stroke: var(--tile-teal-ink); }
.tile-green { background: var(--tile-green-bg); }
.tile-green .icono-tile svg { stroke: var(--tile-green-ink); }
.tile-orange { background: var(--tile-orange-bg); }
.tile-orange .icono-tile svg { stroke: var(--tile-orange-ink); }

/* ---------- Registros diarios ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
}

.temp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.temp-row .nombre-camara { font-size: 14px; font-weight: 500; }

.temp-input-group { display: flex; align-items: center; gap: 6px; }
.temp-input-group button {
    width: 36px; height: 36px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg);
    font-size: 18px; color: var(--ink); cursor: pointer;
}
.temp-input-group input {
    width: 70px; text-align: center; margin-bottom: 0;
    font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 500;
    padding: 8px 4px;
}

.tarea-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.tarea-row:last-child { border-bottom: none; }
.tarea-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--verde); flex-shrink: 0; margin-bottom: 0; }
.tarea-row label { font-size: 14px; margin-bottom: 0; color: var(--ink); }

/* Sello de día registrado */
.sello-card {
    background: var(--verde-bg);
    border: 1px dashed var(--verde);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    margin-bottom: 16px;
    transform: rotate(-0.6deg);
}
.sello-icon {
    width: 44px; height: 44px; margin: 0 auto 10px;
    border: 2px solid var(--verde); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.sello-card .titulo { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px; color: var(--verde); }
.sello-card .hora { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--verde); margin-top: 4px; opacity: 0.8; }

/* Incidencias */
.incidencia-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; font-size: 13px; }
.incidencia-card .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--steel-light); margin-top: 4px; }

/* ---------- Visitas ---------- */

.visita-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.visita-card .fecha { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--steel); margin-bottom: 8px; }
.visita-card .etiqueta { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 600; color: var(--steel); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 12px; margin-bottom: 4px; }
.visita-card .texto { font-size: 14px; line-height: 1.5; white-space: pre-line; }
.visita-card .acciones { background: var(--verde-bg); border-radius: 8px; padding: 10px 12px; font-size: 14px; color: var(--verde); margin-top: 6px; white-space: pre-line; }

.fotos-grid { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.fotos-grid img { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); flex-shrink: 0; }

/* ---------- Documentación ---------- */

.doc-card {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 13px 16px; margin-bottom: 8px; color: var(--ink);
}
.doc-card .nombre { font-size: 14px; font-weight: 500; }
.doc-card .fecha { font-size: 11px; color: var(--steel-light); margin-top: 2px; }
.doc-card .ver { color: var(--steel); font-size: 13px; }

/* ---------- Alertas ---------- */

.alerta-card { display: flex; align-items: flex-start; gap: 12px; border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; font-size: 14px; }
.alerta-rojo { background: var(--rojo-bg); color: var(--rojo); }
.alerta-amarillo { background: var(--amber-bg); color: var(--amber); }
.alerta-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.alerta-rojo .alerta-dot { background: var(--rojo); }
.alerta-amarillo .alerta-dot { background: var(--amber); }

/* ---------- Navegación principal ---------- */

.app-nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    margin: -16px -16px 20px;
    padding: 0 16px;
    position: relative;
}
.app-nav-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.app-nav-brand { display: flex; align-items: center; }
.app-nav-brand img { height: 30px; display: block; }

.app-nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.app-nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--steel);
    padding: 8px 10px;
    border-radius: 8px;
    white-space: nowrap;
}
.app-nav-links a, .app-nav-links a:visited { color: var(--steel); }
.app-nav-links a:hover { background: var(--bg); color: var(--ink); }
.app-nav-links a.activo, .app-nav-links a.activo:visited { background: var(--ink); color: #fff; }
.app-nav-links a.app-nav-logout, .app-nav-links a.app-nav-logout:visited { color: var(--rojo); }

.app-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.app-nav-toggle span { width: 22px; height: 2px; background: var(--ink); display: block; border-radius: 2px; }

.app-nav-search { display: flex; align-items: center; margin-left: 4px; }
.app-nav-search input {
    width: 170px;
    padding: 7px 10px;
    font-size: 13px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}

.app-nav-bell, .app-nav-bell:visited {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--steel);
    padding: 8px 10px;
    border-radius: 8px;
}
.app-nav-bell:hover { background: var(--bg); color: var(--ink); }
.app-nav-bell.activo, .app-nav-bell.activo:visited { background: var(--ink); color: #fff; }
.app-nav-bell svg { width: 17px; height: 17px; flex-shrink: 0; }
.app-nav-badge {
    background: var(--rojo);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
}

/* ---------- Mensajes / chat ---------- */

.chat-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.chat-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-line;
}
.chat-bubble .meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    opacity: 0.7;
    margin-top: 5px;
}
.chat-mio { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 4px; }
.chat-otro { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-bottom-left-radius: 4px; }

.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { margin-bottom: 0; flex: 1; }
.chat-form button {
    width: auto;
    padding: 11px 16px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
}

.inbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: 8px;
    color: var(--ink);
}
.inbox-row .nombre { font-size: 14px; font-weight: 600; }
.inbox-row .preview { font-size: 12px; color: var(--steel); margin-top: 2px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row .meta-derecha { text-align: right; flex-shrink: 0; }
.inbox-row .fecha-inbox { font-size: 11px; color: var(--steel-light); font-family: 'JetBrains Mono', monospace; }

@media (max-width: 760px) {
    .app-nav-links {
        display: none;
        position: absolute;
        top: 56px; left: 0; right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: stretch;
        padding: 8px 16px 16px;
        gap: 2px;
        z-index: 50;
        box-shadow: 0 8px 16px rgba(28, 37, 33, 0.06);
    }
    .app-nav-links.abierto { display: flex; }
    .app-nav-links a { padding: 12px 10px; font-size: 14px; }
    .app-nav-toggle { display: flex; }
    .app-nav-search { width: 100%; margin: 6px 0 0; }
    .app-nav-search input { width: 100%; padding: 10px 12px; font-size: 14px; }
}

/* ---------- Logo ---------- */

.logo-header {
    display: block;
    max-width: 170px;
    height: auto;
    margin: 0 auto 18px;
}

.logo-small {
    display: block;
    max-width: 120px;
    height: auto;
    margin-bottom: 14px;
}

/* ---------- Login ---------- */

.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-box {
    background: var(--surface);
    width: 100%;
    max-width: 380px;
    border-radius: 12px;
    padding: 32px 24px;
    box-shadow: 0 2px 12px rgba(28, 37, 33, 0.08);
}