/*
  Plan de diseño v2
  -------------------
  Base: blanco predominante, con verdes claros como color auxiliar
  (coherente con el sector — verde "ambiental"/tierra, no el amarillo
  de maquinaria de la v1). Tipografía Public Sans. Totalmente
  responsive: en móvil el menú lateral se convierte en un menú
  desplegable (hamburguesa) y las tablas se apilan en tarjetas.
*/

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');

:root {
    --verde-oscuro: #1F4B3F;
    --verde: #3E8E6B;
    --verde-claro: #E8F5EE;
    --verde-claro2: #D3EDE0;
    --texto: #1C2624;
    --texto-suave: #667B74;
    --papel: #FFFFFF;
    --fondo: #F6FAF8;
    --borde: #DCE8E2;
    --oxido: #C0392B;
    --oxido-claro: #FBEAE8;
    --ambar: #B98900;
    --ambar-claro: #FBF3DA;
    --sidebar-ancho: 240px;
    --sidebar-ancho-plegado: 64px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Public Sans', system-ui, sans-serif;
    background: var(--color-fondo, var(--fondo));
    color: var(--texto);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--verde-oscuro); }
h1 { font-size: 21px; font-weight: 700; margin: 0 0 4px; color: var(--texto); }
.subtitulo { color: var(--texto-suave); margin: 0 0 20px; max-width: 65ch; font-size: 14px; }

/* ---------------------------------------------------------------
   Estructura general: sidebar + contenido
--------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.app-nav {
    width: var(--sidebar-ancho);
    flex-shrink: 0;
    background: var(--color-menu, var(--verde-oscuro));
    color: var(--color-texto-menu, #FFFFFF);
    display: flex;
    flex-direction: column;
    transition: width .18s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
}
.app-nav.plegado { width: var(--sidebar-ancho-plegado); }

.app-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    min-height: 40px;
}
.app-nav__brand-logo {
    max-height: 32px; max-width: 100%; height: auto; width: auto;
    background: #fff; border-radius: 4px; padding: 2px;
}
.app-nav__brand-texto {
    font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden;
}
.app-nav.plegado .app-nav__brand-texto,
.app-nav.plegado .app-nav__brand-logo,
.app-nav.plegado .app-nav__tenant,
.app-nav.plegado .app-nav__links li a span,
.app-nav.plegado .app-nav__footer-nombre { display: none; }

/* Plegado: el botón de plegar/desplegar pasa a ser lo único visible en
   esa fila, centrado, para que sea evidente cómo volver a abrir el menú. */
.app-nav.plegado .app-nav__brand { justify-content: center; padding: 16px 4px; }

.app-nav__toggle {
    margin-left: auto;
    background: transparent; border: none; color: var(--color-texto-menu, #FFFFFF);
    cursor: pointer; padding: 6px; border-radius: 4px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.app-nav__toggle:hover { background: rgba(255,255,255,0.15); color: var(--color-texto-menu, #FFFFFF); }
.app-nav.plegado .app-nav__toggle { margin-left: 0; }
/* Flecha invertida cuando está plegado: indica que pulsar vuelve a abrir. */
.app-nav.plegado .app-nav__toggle svg { transform: rotate(180deg); }

.app-nav__tenant { padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.app-nav__tenant label { display: block; font-size: 11px; color: var(--color-texto-menu, #FFFFFF); opacity: .8; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.app-nav__tenant select {
    width: 100%; padding: 7px; border-radius: 4px; font-size: 13px;
    border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); color: var(--color-texto-menu, #FFFFFF);
}
.app-nav__tenant select option { color: #1C2624; }

/* Selector de empresa cuando el menú está plegado: el <select> normal
   se oculta (no cabe), y en su lugar aparece un icono que abre un
   pequeño menú con las empresas — así un super_admin siempre puede
   cambiar de empresa, plegado o no. */
.app-nav__tenant-plegado { display: none; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.14); text-align: center; position: relative; }
.app-nav.plegado .app-nav__tenant-plegado { display: block; }
.app-nav__tenant-plegado summary {
    list-style: none; cursor: pointer; display: inline-flex; padding: 6px;
    border-radius: 4px; color: var(--color-texto-menu, #FFFFFF);
}
.app-nav__tenant-plegado summary::-webkit-details-marker { display: none; }
.app-nav__tenant-plegado summary:hover { background: rgba(255,255,255,0.12); color: var(--color-texto-menu, #FFFFFF); }
.app-nav__tenant-menu {
    position: absolute; top: 4px; left: calc(100% + 8px); z-index: 60;
    background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2);
    min-width: 200px; overflow: hidden; text-align: left;
}
.app-nav__tenant-menu form { margin: 0; }
.app-nav__tenant-menu button {
    display: block; width: 100%; text-align: left; padding: 10px 14px;
    background: none; border: none; cursor: pointer; font-size: 13px;
    font-family: inherit; color: var(--texto); border-bottom: 1px solid var(--borde);
}
.app-nav__tenant-menu button:hover { background: var(--verde-claro); }
.app-nav__tenant-menu button.activo { color: var(--verde-oscuro); font-weight: 700; }

.app-nav__links { list-style: none; margin: 8px 0; padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.app-nav__links li a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; text-decoration: none; font-size: 14px;
    color: var(--color-texto-menu, #FFFFFF); border-left: 3px solid transparent; white-space: nowrap; overflow: hidden;
}
.app-nav__links li a .icono { flex-shrink: 0; width: 18px; text-align: center; }
.app-nav__links li a:hover, .app-nav__links li a.activo {
    border-left-color: var(--verde);
    background: rgba(255,255,255,0.08);
    color: var(--color-texto-menu, #FFFFFF);
}

.app-nav__footer {
    padding: 12px 18px; border-top: 1px solid rgba(255,255,255,0.14);
    position: relative; flex-shrink: 0;
}
.app-nav__footer-btn {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: transparent; border: none; color: var(--color-texto-menu, #FFFFFF); cursor: pointer;
    font-size: 13px; padding: 6px 0; font-family: inherit;
}
.app-nav__footer-menu {
    display: none; position: absolute; bottom: 100%; left: 12px; right: 12px;
    background: #fff; color: var(--texto); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
    overflow: hidden; margin-bottom: 6px;
}
.app-nav__footer-menu.abierto { display: block; }
.app-nav__footer-menu a {
    display: block; padding: 10px 14px; font-size: 13px; text-decoration: none; color: var(--texto);
}
.app-nav__footer-menu a:hover { background: var(--verde-claro); }
.app-nav__footer-menu a.salir { color: var(--oxido); border-top: 1px solid var(--borde); }

.app-content { flex: 1; padding: 28px 40px; width: 100%; max-width: 100%; }

/* Botón hamburguesa (solo visible en móvil) */
.app-topbar-movil {
    display: none;
    align-items: center; gap: 12px;
    background: var(--color-menu, var(--verde-oscuro)); color: var(--color-texto-menu, #FFFFFF);
    padding: 12px 16px; position: sticky; top: 0; z-index: 50;
}
.app-topbar-movil img { max-height: 26px; background: #fff; border-radius: 4px; padding: 2px; }
.app-topbar-movil__btn { background: transparent; border: none; color: var(--color-texto-menu, #FFFFFF); padding: 4px; }
.app-topbar-movil__marca { font-weight: 700; font-size: 15px; }

/* ---------------------------------------------------------------
   Paneles, formularios, botones (look general)
--------------------------------------------------------------- */
.panel {
    background: var(--papel); border: 1px solid var(--borde); border-left: 4px solid var(--verde);
    padding: 18px 22px; margin-bottom: 18px; border-radius: 6px;
}
.panel--aviso { border-left-color: var(--oxido); background: var(--oxido-claro); }
.panel--ok { border-left-color: var(--verde); background: var(--verde-claro); }
.panel--info { border-left-color: var(--ambar); background: var(--ambar-claro); }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.campo label.obligatorio::after { content: " *"; color: var(--oxido); font-weight: 700; }
.campo input[type=text], .campo input[type=date], .campo input[type=time],
.campo input[type=datetime-local], .campo input[type=number], .campo input[type=email],
.campo input[type=password], .campo select, .campo textarea {
    width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
    border-radius: 5px; font-family: inherit; font-size: 14px; background: #fff; color: var(--texto);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-claro);
}
.campo small.ayuda { display: block; color: var(--texto-suave); font-size: 12px; margin-top: 3px; }
.campo-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.campo-fila .campo { flex: 1; min-width: 140px; }

.fila-envio { border: 1px solid var(--borde); padding: 14px; margin-bottom: 10px; border-radius: 6px; position: relative; background: #fbfefc; }
.fila-envio__numero { position: absolute; top: -10px; left: 12px; background: var(--verde-oscuro); color: #fff; font-size: 11px; padding: 2px 9px; border-radius: 999px; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; border: none; border-radius: 6px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: filter .12s ease;
}
.btn:hover { filter: brightness(0.95); }
.btn--primario { background: var(--verde); color: #fff; }
.btn--secundario { background: var(--verde-claro); border: 1px solid var(--verde-claro2); color: var(--verde-oscuro); }
.btn--peligro { background: var(--oxido-claro); border: 1px solid #f0c4bf; color: var(--oxido); }
.btn--sm { padding: 5px 10px; font-size: 12.5px; border-radius: 5px; }

/* Botones de icono (para acciones en filas de tabla, amigables en móvil) */
.btn-icono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--borde);
    background: #fff; color: var(--verde-oscuro); cursor: pointer; text-decoration: none;
}
.btn-icono:hover { background: var(--verde-claro); }
.btn-icono--enviado { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-oscuro); }
.btn-icono--enviado:hover { background: var(--verde); color: #fff; }
.btn-icono.peligro { color: var(--oxido); }
.btn-icono svg { width: 18px; height: 18px; }
.grupo-iconos { display: flex; gap: 6px; flex-wrap: wrap; position: relative; }

.enviar-popover { position: relative; }
.enviar-popover summary {
    list-style: none; cursor: pointer;
}
.enviar-popover summary::-webkit-details-marker { display: none; }
.enviar-popover summary::marker { content: ""; }
.enviar-popover[open] summary { background: var(--verde-claro); border-color: var(--verde); }
.enviar-popover__form {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    background: #fff; border: 1px solid var(--borde); border-radius: 8px;
    padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
    display: flex; gap: 6px; align-items: center; white-space: nowrap;
}
.enviar-popover__form input[type=email] {
    padding: 7px 9px; border: 1px solid var(--borde); border-radius: 5px;
    font-size: 13px; width: 200px; font-family: inherit;
}

table.tabla-datos { width: 100%; border-collapse: collapse; font-size: 13.5px; background: #fff; }
table.tabla-datos th {
    text-align: left; font-size: 11.5px; color: var(--texto-suave); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
    padding: 10px 10px; border-bottom: 2px solid var(--borde);
}
table.tabla-datos td { padding: 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.tabla-datos tbody tr:hover { background: var(--verde-claro); }

.estado { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.estado--activo { background: var(--verde-claro); color: var(--verde-oscuro); }
.estado--modificado { background: var(--ambar-claro); color: var(--ambar); }
.estado--pendiente_manual, .estado--pendiente { background: var(--oxido-claro); color: var(--oxido); }
.estado--cancelado { background: var(--oxido-claro); color: var(--oxido); }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { padding: 9px 16px; text-decoration: none; color: var(--texto-suave); font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tabs a.activo { color: var(--verde-oscuro); border-bottom-color: var(--verde); }

.paginacion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; }
.paginacion a, .paginacion span { padding: 6px 11px; border-radius: 5px; text-decoration: none; color: var(--verde-oscuro); border: 1px solid var(--borde); }
.paginacion a:hover { background: var(--verde-claro); }
.paginacion .activa { background: var(--verde); color: #fff; border-color: var(--verde); }
.paginacion__deshabilitado { padding: 6px 11px; border-radius: 5px; border: 1px solid var(--borde); color: var(--texto-suave); opacity: .5; }

.fila-guardado { border-bottom: 1px solid var(--borde); padding: 8px 0; }
.fila-guardado summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
.fila-guardado form { margin-top: 8px; }

.gestionar-guardados { margin-bottom: 10px; }
.gestionar-guardados summary { cursor: pointer; font-size: 13px; color: var(--verde-oscuro); font-weight: 600; margin-bottom: 6px; }
.gestionar-guardados form {
    display: flex; align-items: center; gap: 8px; margin: 4px 0; padding: 4px 0;
    border-bottom: 1px solid var(--borde);
}
.gestionar-guardados form span { font-size: 13px; flex: 1; }

.filtros-desplegable {
    background: #fff; border: 1px solid var(--borde); border-radius: 8px;
    padding: 4px 14px; margin-bottom: 16px;
}
.filtros-desplegable summary {
    cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--verde-oscuro); list-style: none;
}
.filtros-desplegable summary::-webkit-details-marker { display: none; }
.filtros-desplegable summary::before { content: "▸ "; }
.filtros-desplegable[open] summary::before { content: "▾ "; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 14px; padding-top: 4px; border-top: 1px solid var(--borde); }
.filtros .campo { margin-bottom: 0; min-width: 150px; flex: 1; }

.login-card {
    width: 340px;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 36px 32px 28px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    text-align: center;
}
.login-card__titulo {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--texto);
    margin: 0 0 4px;
}
.login-card__subtitulo {
    font-size: 13px;
    color: var(--texto-suave);
    margin: 0 0 24px;
}
.login-card form { text-align: left; }
/* Sin verde de ninguna empresa concreta: aquí todavía no sabemos con
   cuál se va a entrar, así que el login siempre es neutro. */
.login-card .btn--primario { background: var(--texto); }
.login-card .btn--primario:hover { background: #000; }
.login-card a { color: var(--texto); }

.badge-cancelado {
    display: inline-block; background: var(--oxido); color: #fff; font-weight: 700;
    font-size: 11px; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em;
    cursor: help;
}
.badge-modificado {
    display: inline-block; background: var(--ambar); color: #fff; font-weight: 700;
    font-size: 11px; padding: 3px 10px; border-radius: 999px; letter-spacing: .03em;
    cursor: help;
}

/* ---------------------------------------------------------------
   Responsive: por debajo de 880px, sidebar se oculta y aparece
   la barra superior con hamburguesa; el sidebar se despliega como
   panel deslizante encima del contenido.
--------------------------------------------------------------- */
@media (max-width: 880px) {
    .app-topbar-movil { display: flex; }
    .app-nav {
        position: fixed; left: 0; top: 0; height: 100vh; width: 78vw; max-width: 300px;
        transform: translateX(-100%); transition: transform .2s ease; box-shadow: 4px 0 24px rgba(0,0,0,.25);
    }
    .app-nav.abierto { transform: translateX(0); }
    .app-nav.plegado { width: 78vw; max-width: 300px; } /* en móvil no tiene sentido "plegado", solo abierto/cerrado */
    .app-nav.plegado .app-nav__brand-texto,
    .app-nav.plegado .app-nav__brand-logo,
    .app-nav.plegado .app-nav__tenant,
    .app-nav.plegado .app-nav__links li a span,
    .app-nav.plegado .app-nav__footer-nombre { display: initial; }
    .app-nav.plegado .app-nav__brand { justify-content: flex-start; padding: 16px 18px; }
    .app-nav.plegado .app-nav__tenant-plegado { display: none; }
    .app-nav__toggle { display: none; }
    .app-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 39; }
    .app-overlay.visible { display: block; }

    .app-content { padding: 16px; }
    h1 { font-size: 19px; }

    /* Tablas -> tarjetas apiladas en móvil, compactas: etiqueta y valor
       en la misma línea (no cada uno en su propio bloque), para que
       cada tarjeta ocupe bastante menos alto y quepan más por pantalla. */
    table.tabla-datos.responsive-cards thead { display: none; }
    table.tabla-datos.responsive-cards, table.tabla-datos.responsive-cards tbody, table.tabla-datos.responsive-cards tr, table.tabla-datos.responsive-cards td { display: block; width: 100%; }
    table.tabla-datos.responsive-cards tr { border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 10px; padding: 8px 12px; background: #fff; position: relative; }
    table.tabla-datos.responsive-cards td {
        border-bottom: none; padding: 3px 0;
        display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
    }
    table.tabla-datos.responsive-cards td[data-etiqueta]::before {
        content: attr(data-etiqueta); flex: 0 0 auto; font-size: 10.5px; font-weight: 700;
        color: var(--texto-suave); text-transform: uppercase; letter-spacing: .02em;
    }
    /* El Estado (cancelado/modificado) no lleva fila propia: va como
       badge en la esquina superior derecha, a la altura del número, en
       vez de una línea "ESTADO" que casi siempre está vacía. Estas dos
       reglas van DESPUÉS de las generales de arriba para ganarles en la
       cascada (misma especificidad; gana la que viene después). */
    table.tabla-datos.responsive-cards td[data-etiqueta="Estado"] {
        position: absolute; top: 8px; right: 12px; padding: 0; width: auto; display: block;
    }
    table.tabla-datos.responsive-cards td[data-etiqueta="Estado"]::before { content: none; }

    .filtros { flex-direction: column; align-items: stretch; }
    .filtros .campo { min-width: 0; }

    .campo-fila { flex-direction: column; }
}

@media (min-width: 480px) {
    .dato { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 12px; }
}