/* =====================================================================
   TOKENS DE DISEÑO
   ===================================================================== */
:root {
    --color-bg: #F5F1E8;
    --color-surface: #FFFFFF;
    --color-primary: #234D3B;
    --color-primary-light: #3F6B54;
    --color-accent: #B8863B;
    --color-text: #232620;
    --color-muted: #6B7268;
    --color-border: #DDD6C7;
    --color-danger: #A23E3E;
    --color-success: #3F7A5C;
    --color-warning: #B8863B;

    --fuente-display: 'Space Grotesk', sans-serif;
    --fuente-cuerpo: 'Inter', sans-serif;

    --radio: 10px;
    --sombra: 0 4px 16px rgba(35, 38, 32, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--fuente-cuerpo);
    background: var(--color-bg);
    color: var(--color-text);
}

.oculto { display: none !important; }

h1, h2 { font-family: var(--fuente-display); margin: 0; }

/* =====================================================================
   LOGIN — pantalla dividida (panel de marca + formulario)
   ===================================================================== */
.pantalla-login {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

/* ---- Panel izquierdo (marca) ---- */
.panel-marca {
    position: relative;
    overflow: hidden;
    color: white;
    padding: 48px 64px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    background:
        radial-gradient(900px 500px at 105% -10%, rgba(184,134,59,0.28), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(63,107,84,0.75), transparent 60%),
        linear-gradient(160deg, #1B3D2E 0%, #234D3B 55%, #2B5A45 100%);
}
/* Trama de puntos sutil, puramente decorativa */
.panel-marca::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%);
    pointer-events: none;
}
/* Círculos concéntricos dorados en la esquina */
.panel-marca::after {
    content: "";
    position: absolute;
    width: 420px; height: 420px;
    right: -170px; bottom: -170px;
    border-radius: 50%;
    border: 1px solid rgba(184,134,59,0.35);
    box-shadow: 0 0 0 46px rgba(184,134,59,0.05), 0 0 0 92px rgba(184,134,59,0.035);
    pointer-events: none;
}
.panel-marca > * { position: relative; z-index: 1; }

.marca-login { display: flex; align-items: center; gap: 14px; }
.marca-logo {
    width: 46px; height: 46px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    color: #F1D9A8;
    padding: 5px;
}
.panel-marca .marca-logo { width: 60px; height: 60px; border-radius: 15px; padding: 4px; }
.marca-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-nombre {
    font-family: var(--fuente-display);
    font-weight: 700; font-size: 24px; letter-spacing: 0.04em;
}
.marca-sub { font-size: 12px; color: #B9D2C2; margin-top: 2px; }

.marca-centro { max-width: 520px; }

.titular-login {
    font-family: var(--fuente-display);
    font-weight: 700;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
}
.titular-login em { font-style: normal; color: #E9C77F; }

.tagline-login {
    color: #C9DED0;
    margin: 14px 0 34px;
    font-size: 16px;
    line-height: 1.5;
}

.beneficios-login, .pasos-login {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 16px;
}
.beneficios-login li, .pasos-login li {
    display: flex; align-items: flex-start; gap: 14px;
    font-size: 14.5px; line-height: 1.45; color: #D7E6DC;
}
.beneficios-login strong, .pasos-login strong { color: #fff; font-weight: 600; }
.beneficio-icono {
    flex: none; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    color: #E9C77F;
}
.paso-num {
    flex: none; width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(233,199,127,0.16);
    border: 1px solid rgba(233,199,127,0.5);
    color: #F1D9A8;
    font-family: var(--fuente-display); font-weight: 700; font-size: 15px;
}

.pie-marca { margin: 0; font-size: 12px; color: #9DBBA9; letter-spacing: 0.03em; }

/* ---- Panel derecho (formulario) ---- */
.panel-formulario {
    background: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
}

.tarjeta-login {
    background: var(--color-surface);
    border-radius: 16px;
    border: 1px solid rgba(35,38,32,0.06);
    box-shadow: 0 18px 50px rgba(35,38,32,0.10), 0 2px 6px rgba(35,38,32,0.05);
    padding: 44px 40px 36px;
    width: 100%;
    max-width: 420px;
}

.marca-movil { display: none; align-items: center; gap: 10px; margin-bottom: 22px; }
.marca-movil .marca-nombre { color: var(--color-primary); font-size: 20px; }
.marca-logo-verde {
    width: 38px; height: 38px; border-radius: 11px;
    background: #fff; border: 1px solid #D9D2C0; color: #F1D9A8; padding: 4px;
}

.titulo-login {
    font-family: var(--fuente-display);
    font-size: 26px; font-weight: 700;
    color: var(--color-text);
    margin: 0 0 6px;
}
.subtitulo-login {
    color: var(--color-muted);
    margin: 0 0 26px;
    font-size: 14px;
    line-height: 1.5;
}

.form-login { display: flex; flex-direction: column; gap: 18px; }

.tarjeta-login input[type=email],
.tarjeta-login input[type=text],
.tarjeta-login input[type=password] {
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
    background: #FBFAF6;
}
.tarjeta-login input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(35,77,59,0.15);
    background: #fff;
}
.tarjeta-login .boton-login { padding: 14px 18px; font-size: 15px; border-radius: 10px; margin-top: 4px; }

.enlace-olvide {
    display: block; text-align: center; margin-top: 18px;
    font-size: 13px; color: var(--color-muted); text-decoration: none;
}
.enlace-olvide:hover { color: var(--color-primary); text-decoration: underline; }

.separador-login {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px;
    font-size: 12px; color: var(--color-muted);
}
.separador-login::before, .separador-login::after {
    content: ""; flex: 1; height: 1px; background: var(--color-border);
}
.tarjeta-login .boton-registro {
    display: block; text-align: center; text-decoration: none;
    background: transparent; color: var(--color-primary);
    border: 1.5px solid var(--color-primary);
    padding: 11px 18px; border-radius: 10px;
}
.tarjeta-login .boton-registro:hover { background: var(--color-primary); color: #fff; opacity: 1; }

/* Se conserva por compatibilidad (el enlace de registro ahora es un botón) */
.enlace-registro {
    text-align: center; margin: 14px 0 0; font-size: 13px; color: var(--color-muted);
}
.enlace-registro a { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.enlace-registro a:hover { text-decoration: underline; }

.nombre-empresa {
    font-size: 11px; color: rgba(255,255,255,0.6); margin: -20px 0 0 34px;
}
.btn-editar-logo-empresa {
    background: none; border: none; cursor: pointer; text-decoration: underline;
    font-family: var(--fuente-cuerpo); font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.75); padding: 0 0 8px; margin: 0;
}
.btn-editar-logo-empresa:hover { color: #fff; }

/* Pantallas medianas: el panel de marca pierde la lista para no apretar */
@media (max-width: 1100px) {
    .panel-marca { padding: 40px 40px; }
}

/* Celular / tablet vertical: una sola columna, marca compacta arriba */
@media (max-width: 860px) {
    .pantalla-login { grid-template-columns: 1fr; min-height: 100dvh; }
    .panel-marca { display: none; }
    .panel-formulario {
        align-items: center;
        padding: 0;
        background:
            linear-gradient(160deg, #1B3D2E 0%, #234D3B 100%) top / 100% 34dvh no-repeat,
            var(--color-bg);
    }
    .tarjeta-login {
        margin: 28px 16px;
        width: 100%; max-width: 440px;
        padding: 28px 22px 26px;
    }
    .panel-formulario { justify-content: center; }
    .marca-movil { display: flex; }
    .titulo-login { font-size: 23px; }
}

label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-muted);
}

input, select, textarea {
    font-family: var(--fuente-cuerpo);
    font-size: 14px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text);
}

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

/* =====================================================================
   BOTONES
   ===================================================================== */
.boton {
    font-family: var(--fuente-cuerpo);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.boton:hover { opacity: 0.88; }
.boton:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.boton-primario { background: var(--color-primary); color: white; }
.boton-fantasma { background: transparent; color: var(--color-muted); border: 1px solid var(--color-border); }
.boton-ancho { width: 100%; }

.boton-texto {
    background: none; border: none; cursor: pointer;
    font-family: var(--fuente-cuerpo); font-size: 13px; font-weight: 600;
    color: var(--color-primary); padding: 4px 8px;
}
.boton-texto.peligro { color: var(--color-danger); }

.mensaje-error {
    background: #A23E3E14;
    color: var(--color-danger);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

/* =====================================================================
   LAYOUT APP
   ===================================================================== */
.app { display: block; min-height: 100vh; }

/* -------------------------------------------------------------
   Menú lateral: ahora es un panel FLOTANTE, no fijo en el layout.
   Vive oculto fuera de la pantalla (left: -260px) y se desliza hacia
   adentro solo cuando el usuario lo abre con el botón de hamburguesa.
   Esto libera todo el ancho de la pantalla para el contenido — mucho
   más cómodo en tablas con varias columnas. ------------------------- */
.barra-lateral {
    position: fixed;
    top: 0; left: 0;
    /* Se esconde con transform (100% de su propio ancho + sombra), no con
       un left fijo: en el celular el menú mide 82vw y con left:-260px
       quedaba una franja verde asomada que tapaba el contenido. */
    transform: translateX(-110%);
    visibility: hidden;
    width: 240px;
    height: 100vh; height: 100dvh;
    overflow-y: auto;  /* si la pantalla es baja, se desplaza y "Cerrar sesión" siempre se alcanza */
    z-index: 50;
    background: var(--color-primary);
    color: white;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    box-shadow: 8px 0 24px rgba(0,0,0,0.15);
    transition: transform 0.22s ease, visibility 0.22s;
}
.barra-lateral > * { flex-shrink: 0; }
.barra-lateral.abierta { transform: none; visibility: visible; }

.btn-menu-toggle {
    position: fixed; top: 18px; left: 18px; z-index: 60;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--color-primary); color: white; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: var(--sombra);
}
.btn-menu-toggle:hover { opacity: 0.9; }

.fondo-menu {
    position: fixed; inset: 0; background: rgba(0,0,0,0.35);
    z-index: 45;
}

.marca {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--fuente-display); font-weight: 700; font-size: 18px;
}
.marca .marca-img {
    width: 34px; height: 34px; flex: none;
    background: #fff; border-radius: 9px; padding: 3px;
}

.nav-lateral { display: flex; flex-direction: column; gap: 4px; flex: 1; }

.nav-item {
    text-align: left;
    background: none; border: none; color: #E9E4D8;
    font-family: var(--fuente-cuerpo); font-size: 14px; font-weight: 500;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.nav-item.activo { background: rgba(255,255,255,0.14); color: white; font-weight: 600; }
.nav-item:hover { background: rgba(255,255,255,0.08); }

.usuario-actual { display: flex; align-items: center; gap: 10px; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-accent); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; font-family: var(--fuente-display);
    flex-shrink: 0;
}
.usuario-info { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; overflow: hidden; }
.usuario-info strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-info span { color: #C9C2AE; text-transform: capitalize; }

.barra-lateral .boton-fantasma { color: #E9E4D8; border-color: rgba(255,255,255,0.25); }

/* El contenido ya no comparte el ancho con un sidebar fijo — ahora
   ocupa toda la pantalla, con un poco de espacio a la izquierda para
   no quedar tapado por el botón flotante de menú. */
.contenido { padding: 32px 40px 32px 76px; overflow-y: auto; max-width: 1400px; margin: 0 auto; }

.encabezado-vista {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 20px;
}
.descripcion-vista { color: var(--color-muted); margin: 4px 0 0; font-size: 14px; }

.tarjetas-resumen {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px; margin-bottom: 28px;
}
.tarjeta-resumen {
    background: var(--color-surface); border-radius: var(--radio);
    box-shadow: var(--sombra); padding: 18px 20px;
}
.tarjeta-resumen .valor {
    font-family: var(--fuente-display); font-size: 28px; font-weight: 700;
    color: var(--color-primary); line-height: 1.1;
}
.tarjeta-resumen .etiqueta {
    font-size: 12px; color: var(--color-muted); margin-top: 4px;
    text-transform: uppercase; letter-spacing: 0.03em;
}

.fila-encabezado-seccion {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; flex-wrap: wrap; gap: 10px;
}
.filtros-inicio { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros-inicio select, .filtros-inicio input[type="date"] { margin: 0; font-size: 13px; padding: 6px 10px; }

.subtitulo-seccion {
    font-size: 15px; font-weight: 600; margin: 0 0 12px;
    font-family: var(--fuente-display);
}

/* Tablero de Coordinar: una columna por técnico, tarjetas apiladas
   ordenadas por hora — versión simplificada del Gantt de referencia,
   priorizando claridad sobre arrastrar-y-soltar. */
.tablero-coordinar {
    display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px;
}
.columna-tecnico {
    background: var(--color-surface); border-radius: var(--radio);
    box-shadow: var(--sombra); min-width: 240px; flex: 1 0 240px;
    max-height: 70vh; display: flex; flex-direction: column;
}
.columna-tecnico-header {
    padding: 12px 14px; border-bottom: 1px solid var(--color-border);
    font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center;
}
.columna-tecnico-header .contador {
    background: var(--color-primary); color: white; border-radius: 999px;
    font-size: 11px; padding: 2px 8px;
}
.columna-tecnico.columna-sin-asignar .columna-tecnico-header .contador { background: var(--color-danger); }
.columna-tecnico-body { padding: 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.tarjeta-visita-coord {
    background: var(--color-bg); border-radius: 8px; padding: 10px 12px;
    border-left: 3px solid var(--color-accent); font-size: 13px;
}
.tarjeta-visita-coord.realizada { border-left-color: var(--color-success); opacity: 0.75; }
.tarjeta-visita-coord.cancelada { border-left-color: var(--color-danger); opacity: 0.6; text-decoration: line-through; }
.tarjeta-visita-coord .hora { font-weight: 700; color: var(--color-primary); }
.tarjeta-visita-coord .cliente-nombre {
    display: block; margin: 2px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta-visita-coord .servicio-nombre { display: block; color: var(--color-muted); font-size: 12px; }

.chips-tabs {
    display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
}
.chip-tab {
    background: var(--color-surface); border: 1px solid var(--color-border);
    color: var(--color-muted); font-size: 13px; font-weight: 600;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.chip-tab.activo { background: var(--color-primary); border-color: var(--color-primary); color: white; }
.chip-tab:hover:not(.activo) { border-color: var(--color-primary); color: var(--color-primary); }

.campo-busqueda, .filtros-visitas select {
    width: 260px; margin-bottom: 16px;
}

/* =====================================================================
   TABLA
   ===================================================================== */
.tabla-envoltorio {
    background: var(--color-surface);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    /* overflow-x: auto en vez de "hidden" — con overflow: hidden, una
       columna que no cabe (como "Acciones" en Equipo, ahora con 6
       columnas) queda recortada y desaparece de la pantalla, en vez
       de poderse desplazar para verla. overflow-y se deja en hidden
       para conservar las esquinas redondeadas arriba y abajo. */
    overflow-x: auto;
    overflow-y: hidden;
}

.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-muted); padding: 10px 14px; border-bottom: 1px solid var(--color-border);
}
.tabla td {
    padding: 11px 14px; font-size: 14px; border-bottom: 1px solid var(--color-border);
    vertical-align: middle; line-height: 1.4;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: #F5F1E866; }

.celda-vacia { text-align: center; color: var(--color-muted); padding: 32px; }

/* Trunca textos largos (ej: nombres de empresa extensos) en vez de
   dejar que rompan la alineación de la fila. El title="" del propio
   <td> muestra el texto completo como tooltip nativo del navegador
   al pasar el mouse — no se pierde información, solo se controla
   el espacio visible. Para que este max-width se respete de verdad
   (y no que la columna se estire igual si el contenido de al lado es
   corto) la tabla que la usa necesita table-layout: fixed — ver los
   anchos por columna más abajo, en Inicio y Visitas. */
.celda-truncar {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================================
   ANCHOS POR COLUMNA — tablas con columnas fijas conocidas.
   Sin esto, el navegador reparte el ancho según el contenido de cada
   celda con reglas poco predecibles: columnas cortas (N°, Estado,
   Teléfono) terminaban con más aire del que necesitan mientras
   Dirección o Cliente se apretaban y el texto se iba a 2-3 líneas.
   Aquí se fija a mano qué proporción de la tabla le toca a cada una,
   dejando la mayor parte para las columnas con más información real.
   Los catálogos y dispositivos (columnas dinámicas según el tipo) se
   quedan con el reparto automático del navegador porque su número de
   columnas cambia según la pestaña.
   ===================================================================== */
#vista-inicio .tabla { table-layout: fixed; }
#vista-inicio .tabla th:nth-child(1), #vista-inicio .tabla td:nth-child(1) { width: 12%; } /* Fecha */
#vista-inicio .tabla th:nth-child(2), #vista-inicio .tabla td:nth-child(2) { width: 8%; }  /* Hora */
#vista-inicio .tabla th:nth-child(3), #vista-inicio .tabla td:nth-child(3) { width: 24%; } /* Cliente */
#vista-inicio .tabla th:nth-child(4), #vista-inicio .tabla td:nth-child(4) { width: 20%; } /* Servicio */
#vista-inicio .tabla th:nth-child(5), #vista-inicio .tabla td:nth-child(5) { width: 20%; } /* Técnico */
#vista-inicio .tabla th:nth-child(6), #vista-inicio .tabla td:nth-child(6) { width: 16%; } /* Estado */

#vista-clientes .tabla { table-layout: fixed; min-width: 980px; }
#vista-clientes .tabla th:nth-child(1), #vista-clientes .tabla td:nth-child(1) { width: 5%; }  /* N° */
#vista-clientes .tabla th:nth-child(2), #vista-clientes .tabla td:nth-child(2) { width: 20%; } /* Nombre */
#vista-clientes .tabla th:nth-child(3), #vista-clientes .tabla td:nth-child(3) { width: 13%; } /* Documento */
#vista-clientes .tabla th:nth-child(4), #vista-clientes .tabla td:nth-child(4) { width: 30%; } /* Dirección */
#vista-clientes .tabla th:nth-child(5), #vista-clientes .tabla td:nth-child(5) { width: 11%; } /* Teléfono */
#vista-clientes .tabla th:nth-child(6), #vista-clientes .tabla td:nth-child(6) { width: 10%; } /* Contacto */
#vista-clientes .tabla th:nth-child(7), #vista-clientes .tabla td:nth-child(7) { width: 11%; } /* Acciones: "Eliminar" apilado es el botón más largo (~81px + su padding) — 11% le sobra aire de más sin regalar espacio de las columnas con datos reales. */
/* El documento (NIT) trae un espacio entre "NIT" y el número — con la
   columna angosta, el navegador partía la línea justo en ese espacio
   y, si aún no cabía, seguía partiendo por el guion del propio NIT
   ("901.327.720-" / "8"). nowrap + ellipsis evita que se corte a la
   mitad: si no cabe completo, se corta con "…" en vez de romperse. */
#vista-clientes .tabla td:nth-child(3) {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

#vista-seguimientos .tabla { table-layout: fixed; min-width: 900px; }
#vista-seguimientos .tabla th:nth-child(1), #vista-seguimientos .tabla td:nth-child(1) { width: 13%; } /* Fecha */
#vista-seguimientos .tabla th:nth-child(2), #vista-seguimientos .tabla td:nth-child(2) { width: 22%; } /* Cliente */
#vista-seguimientos .tabla th:nth-child(3), #vista-seguimientos .tabla td:nth-child(3) { width: 25%; } /* Título */
#vista-seguimientos .tabla th:nth-child(4), #vista-seguimientos .tabla td:nth-child(4) { width: 16%; } /* Responsable */
#vista-seguimientos .tabla th:nth-child(5), #vista-seguimientos .tabla td:nth-child(5) { width: 11%; } /* Estado */
#vista-seguimientos .tabla th:nth-child(6), #vista-seguimientos .tabla td:nth-child(6) { width: 13%; } /* Acciones: apilados, "Marcar hecho" es el botón más largo (~106px + su padding) */

#vista-visitas .tabla { table-layout: fixed; min-width: 960px; }
#vista-visitas .tabla th:nth-child(1), #vista-visitas .tabla td:nth-child(1) { width: 13%; } /* Fecha */
#vista-visitas .tabla th:nth-child(2), #vista-visitas .tabla td:nth-child(2) { width: 24%; } /* Cliente */
#vista-visitas .tabla th:nth-child(3), #vista-visitas .tabla td:nth-child(3) { width: 20%; } /* Servicio */
#vista-visitas .tabla th:nth-child(4), #vista-visitas .tabla td:nth-child(4) { width: 17%; } /* Técnico */
#vista-visitas .tabla th:nth-child(5), #vista-visitas .tabla td:nth-child(5) { width: 13%; } /* Estado */
#vista-visitas .tabla th:nth-child(6), #vista-visitas .tabla td:nth-child(6) { width: 13%; } /* Acciones: apilados, "Completar" es el botón más largo entre Editar/Completar/Cancelar */

#vista-equipo .tabla { table-layout: fixed; min-width: 900px; }
#vista-equipo .tabla th:nth-child(1), #vista-equipo .tabla td:nth-child(1) { width: 20%; } /* Nombre */
#vista-equipo .tabla th:nth-child(2), #vista-equipo .tabla td:nth-child(2) { width: 24%; } /* Correo */
#vista-equipo .tabla th:nth-child(3), #vista-equipo .tabla td:nth-child(3) { width: 10%; } /* Rol */
#vista-equipo .tabla th:nth-child(4), #vista-equipo .tabla td:nth-child(4) { width: 14%; } /* Teléfono */
#vista-equipo .tabla th:nth-child(5), #vista-equipo .tabla td:nth-child(5) { width: 16%; } /* Sede */
#vista-equipo .tabla th:nth-child(6), #vista-equipo .tabla td:nth-child(6) { width: 16%; } /* Acciones: apilados, "Eliminar" es el botón más largo entre Editar/Eliminar */

/* La celda de acciones es una celda de tabla NORMAL. Antes tenía
   display: flex, y una celda con flex deja de comportarse como celda:
   no respetaba el ancho de su columna y los botones (Editar, Eliminar...)
   se salían por encima de la información de la columna vecina. Ahora
   los botones son inline-block: se acomodan al ancho que tenga la
   columna y, si no caben todos en una línea, bajan a la siguiente en
   vez de montarse sobre otra cosa. */
.acciones-fila { white-space: normal; }
.acciones-fila .boton-texto {
    display: inline-block; white-space: nowrap; padding: 2px 0;
    margin: 0 12px 2px 0; text-align: left;
}
/* Los botones de acción se apilan uno debajo del otro (la columna no
   es lo bastante ancha para varios en línea, y está bien que sea
   así — ver el ancho de columna "Acciones" de cada tabla más abajo).
   Como se apilan, el ancho que necesita esa columna es el del botón
   MÁS LARGO de la lista ("Eliminar" en Clientes, "Marcar hecho" en
   Seguimientos), no la suma de los 3. Antes le dábamos min-width
   fijo aquí (150px / 220px) ADEMÁS de un ancho de columna en % —
   como los dos no coincidían, sobraba espacio en un lado u otro
   (primero a la izquierda de los botones, luego a la derecha). Ahora
   el ancho vive en un solo lugar: el % de columna junto a cada
   tabla. Quitamos el min-width de aquí para no volver a duplicarlo. */

/* Badges de estado — información real, no decoración */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.badge-programada { background: #B8863B22; color: #8A6425; }
.badge-realizada  { background: #3F7A5C22; color: #235A3E; }
.badge-cancelada  { background: #A23E3E1c; color: #A23E3E; }

/* =====================================================================
   MODAL
   ===================================================================== */
.modal-fondo {
    position: fixed; inset: 0; background: rgba(35,38,32,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; z-index: 50;
}
.modal {
    background: var(--color-surface); border-radius: var(--radio);
    box-shadow: var(--sombra); width: 100%; max-width: 440px;
    max-height: 90vh; overflow-y: auto;
    display: flex; flex-direction: column;
}
/* El encabezado y los botones de abajo quedan fijos mientras el resto
   del formulario se desplaza — antes todo el modal (encabezado,
   preguntas y botones) se movía junto al hacer scroll, y en un
   formulario largo (Servicio MIP, Tanques) el técnico podía llegar al
   final de lo que se ve en pantalla, no notar que faltaban más
   preguntas más abajo, y pensar que ya había terminado sin llegar
   nunca al botón "Guardar". Con el encabezado y los botones fijos, el
   contenido de en medio que se corta contra ellos deja claro que hay
   más para desplazar. */
.modal-encabezado {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 24px; border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 2; background: var(--color-surface); flex-shrink: 0;
}
.boton-cerrar {
    background: none; border: none; font-size: 22px; cursor: pointer;
    color: var(--color-muted); line-height: 1;
}
.modal-form { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.modal-ancho { max-width: 560px; }
/* El formulario de cliente creció bastante (número, grupo, contacto,
   ubicación GPS) — con el ancho base de 440px, la fila de "Latitud +
   Longitud + Usar mi ubicación" no cabía y forzaba scroll horizontal
   dentro del modal. 680px le da aire de sobra a esa fila. */
.modal-ancho-cliente { max-width: 680px; }
.fila-dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fila-ubicacion {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center;
}
.fila-ubicacion input { margin: 0; }
.fila-ubicacion .boton-texto { white-space: nowrap; }
.fila-checkbox { flex-direction: row; align-items: center; gap: 8px; }
.fila-checkbox input { width: auto; }
.modal-acciones {
    display: flex; justify-content: flex-end; gap: 10px;
    position: sticky; bottom: 0; z-index: 2; background: var(--color-surface);
    margin: 6px -24px -20px; padding: 14px 24px; border-top: 1px solid var(--color-border);
}
.ayuda-texto { font-size: 12px; color: var(--color-muted); margin: -6px 0 0; }

/* En celular, donde de verdad se diligencian estos formularios, un
   modal flotante y angosto deja muy poco alto útil para el contenido
   — casi de pantalla completa aprovecha todo el espacio disponible y
   hace mucho más difícil "perderse" preguntas sin querer. */
@media (max-width: 600px) {
    .modal-fondo { padding: 0; align-items: flex-end; }
    /* 96dvh (altura "dinámica" de ventana) en vez de solo 96vh — en el
       celular, vh se calcula sobre la pantalla completa sin descontar
       la barra de direcciones ni el teclado en pantalla, así que al
       enfocar una casilla para escribir, el teclado se comía parte
       del modal y lo que estaba abajo (sobre todo el botón de
       Guardar) quedaba tapado o cortado. dvh sí se ajusta a esto; se
       deja 96vh primero como respaldo para navegadores viejos que no
       conocen dvh, que simplemente ignoran esa segunda línea. */
    .modal { max-width: 100%; width: 100%; border-radius: var(--radio) var(--radio) 0 0;
             max-height: 96vh; max-height: 96dvh; }
}

.fieldset-productos {
    border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 14px;
}
.fieldset-productos legend {
    font-size: 12px; font-weight: 600; color: var(--color-muted); padding: 0 6px;
}
.fila-producto {
    display: grid; grid-template-columns: 1fr 90px 70px auto; gap: 8px; align-items: center;
    margin-bottom: 8px;
}
.fila-producto select, .fila-producto input { margin: 0; min-width: 0; }
.fila-producto-entrega {
    display: grid; grid-template-columns: 2fr 100px 1.5fr auto; gap: 8px; align-items: center;
    margin-bottom: 8px;
}
/* min-width: 0 es el arreglo real — sin esto, un <input> dentro de una
   cuadrícula (grid) no se achica más allá de su ancho "de fábrica"
   (~170px en la mayoría de navegadores) sin importar qué tan angosta
   sea la columna que le toque, así que la fila se salía del modal en
   vez de acomodarse — se notaba sobre todo en celular o con varias
   columnas juntas (Productos entregados, Extintores, tablas de
   plantillas). */
.fila-producto-entrega input, .fila-producto-entrega select { margin: 0; min-width: 0; }
/* Envuelve el encabezado + las filas de una tabla del formulario —
   con columnas que ya no se achican más allá de 130px (ver
   agregarFilaTabla), una tabla de 9-10 columnas no cabe en el ancho
   del modal; en vez de volverse ilegible, se desplaza hacia los
   lados como cualquier tabla ancha de la app. */
.tabla-orden-envoltorio { overflow-x: auto; padding-bottom: 4px; }
.encabezado-fila-tabla-orden {
    display: grid; gap: 8px; margin-bottom: 6px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--color-muted);
}
.encabezado-fila-tabla-orden span { padding: 0 2px; }
.fila-extintor-orden {
    display: grid; grid-template-columns: 2fr 150px 70px auto; gap: 8px; align-items: center;
    margin-bottom: 8px;
}
.fila-extintor-orden select, .fila-extintor-orden input { margin: 0; min-width: 0; }
/* Las tablas de las plantillas (Métodos de control, Producto aplicado,
   Plaga evidenciada, etc.) arman su fila reutilizando la clase de
   arriba pero cada celda lleva esta clase propia — el mismo arreglo
   de min-width le hace falta acá también, cubre tanto <input> como
   los <select> de las columnas enlazadas a catálogo. */
.valor-columna-tabla { min-width: 0; }
.editor-campo-plantilla {
    border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
    background: var(--color-fondo-suave, #fafaf8);
}
.editor-campo-fila-principal {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.editor-campo-fila-principal input[type="text"] { flex: 2; min-width: 140px; margin: 0; }
.editor-campo-fila-principal select { flex: 1; min-width: 110px; margin: 0; }
.editor-campo-fila-principal label.chk { display: flex; align-items: center; gap: 4px; font-size: 12px; white-space: nowrap; margin: 0; }
.editor-campo-opciones { margin-top: 8px; }
.editor-campo-opciones input { margin: 0; }
.editor-columnas-tabla {
    margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--color-border); border-radius: 6px;
}
.editor-columnas-tabla .fila-columna-tabla {
    display: grid; grid-template-columns: 2fr 1fr auto; gap: 6px; margin-bottom: 6px; align-items: center;
}
.editor-columnas-tabla .fila-columna-tabla input, .editor-columnas-tabla .fila-columna-tabla select { margin: 0; min-width: 0; }
.btn-quitar-producto {
    background: none; border: none; color: var(--color-danger); cursor: pointer;
    font-size: 18px; line-height: 1; padding: 4px;
}

/* Registro fotográfico del formulario de Órdenes — pensado para
   celular: el input con capture="environment" abre la cámara trasera
   directo, y las miniaturas quedan grandes y fáciles de tocar. */
.galeria-fotos-orden {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; margin-top: 10px;
}
.foto-orden-miniatura {
    position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border);
}
.foto-orden-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-orden-miniatura .btn-quitar-foto {
    position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); color: #fff; border: none;
    border-radius: 999px; width: 24px; height: 24px; font-size: 16px; line-height: 1; cursor: pointer;
}

/* Firma del cliente: el canvas ocupa todo el ancho disponible y es
   alto (140px) para que sea cómodo firmar con el dedo en un celular,
   no solo con mouse en escritorio. touch-action: none evita que el
   navegador intente hacer scroll de la página mientras se firma. */
.firma-canvas {
    display: block; width: 100%; height: 140px; border: 1px dashed var(--color-border); border-radius: 8px;
    background: #fff; touch-action: none; margin-top: 8px;
}
.firma-existente { display: block; max-width: 100%; max-height: 140px; border: 1px solid var(--color-border); border-radius: 8px; margin-top: 8px; }
.acciones-firma { display: flex; gap: 12px; margin-top: 6px; }

#btn-agregar-producto { padding: 4px 0; }

.detalle-evidencia {
    border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 14px;
}
.detalle-evidencia summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-muted);
}
.detalle-evidencia label { margin-top: 10px; }

.grupo-tipo-dispositivo {
    margin-bottom: 12px;
}
.grupo-tipo-dispositivo h4 {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--color-muted); margin: 0 0 6px;
}
.fila-dispositivo-revisar {
    display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
    padding: 6px 0; font-size: 13px;
}
.fila-dispositivo-revisar input[type="checkbox"] { width: auto; margin: 0; }
.fila-dispositivo-revisar .etiqueta-dispositivo { display: flex; flex-direction: column; }
.fila-dispositivo-revisar .etiqueta-dispositivo small { color: var(--color-muted); }
.fila-dispositivo-revisar select { font-size: 12px; padding: 4px 6px; margin: 0; width: auto; }

.reporte-campo { margin-bottom: 14px; }
.reporte-campo strong { display: block; font-size: 12px; color: var(--color-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.reporte-campo span { font-size: 14px; }

/* =====================================================================
   TOAST (confirmaciones breves)
   ===================================================================== */
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--color-text); color: white;
    padding: 12px 20px; border-radius: 8px; font-size: 14px;
    box-shadow: var(--sombra); z-index: 100;
}
.toast.error { background: var(--color-danger); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 720px) {
    .contenido { padding: 20px 20px 20px 66px; }
    .fila-dos-columnas { grid-template-columns: 1fr; }
    .campo-busqueda, .filtros-visitas select { width: 100%; }
    .barra-lateral { width: 82vw; max-width: 320px; }
}

/* Bloque con los datos de la visita (dirección, cómo llegar, observaciones
   del servicio) que ve el técnico arriba del formulario que va a llenar. */
.info-visita {
    background: #f4f4f2; border: 1px solid var(--color-border); border-radius: 8px;
    padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.info-visita .campo { margin: 0; }
.info-visita a.boton, #detalle-visita-contenido a.boton {
    display: block; text-align: center; text-decoration: none;
}
#detalle-visita-contenido .campo { margin: 0; }

/* Título y dato separados: "Cliente: NOMBRE" con espacio, en vez de
   pegados ("ClienteNOMBRE"). */
.info-visita .campo strong, #detalle-visita-contenido .campo strong {
    margin-right: 6px;
}
.info-visita .campo strong::after, #detalle-visita-contenido .campo strong::after {
    content: ":";
}
.info-visita, #detalle-visita-contenido { line-height: 1.5; }
#detalle-visita-contenido { gap: 14px; }

/* Coordinar: dirección y observaciones dentro de cada tarjeta, y los
   botones para mandar la información por WhatsApp. */
.tarjeta-visita-coord .detalle-coord {
    display: block; margin-top: 4px; font-size: 12px; line-height: 1.4;
    white-space: normal; overflow-wrap: anywhere;
}
.tarjeta-visita-coord .detalle-coord strong { margin-right: 4px; }
.tarjeta-visita-coord .acciones-coord { display: flex; gap: 12px; margin-top: 6px; }
.tarjeta-visita-coord .acciones-coord .boton-texto { padding: 2px 0; }
.acciones-columna-coord { padding: 6px 14px 0; }
.acciones-columna-coord .boton-texto { padding: 2px 0; }

.filtros-visitas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
/* El selector traía margin-bottom: 16px (de .campo-busqueda) que lo hacía más alto
   que el resto y empujaba la fila hacia abajo — acá el espacio ya lo da el gap. */
.filtros-visitas select { margin-bottom: 0; }
.filtro-fecha-inline {
    /* flex-direction: row — la regla general de <label> apila el texto
       ("Desde") ENCIMA del campo; acá tiene que ir al lado, o la casilla
       queda más abajo que el selector y los botones de la misma fila. */
    display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
    font-size: 13px; color: var(--color-muted);
}
.filtro-fecha-inline input[type="date"] { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--color-border); }

/* Paginación — Clientes (y cualquier otra tabla que la use más
   adelante): botones a los lados, texto "Página X" en el medio. */
.paginacion {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    padding: 14px 0; font-size: 13px; color: var(--color-muted);
}
.paginacion button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Buscador de cliente con sugerencias — Programar visita. Los campos
   normales se estiran solos al ancho completo porque son hijos
   directos de un <label> en flexbox (column + stretch por defecto) —
   pero este input quedó un nivel más adentro, dentro de este div
   contenedor, así que ya no hereda ese estiramiento automático y
   había que dárselo a mano. */
.buscador-cliente-envoltorio { position: relative; width: 100%; }
.buscador-cliente-envoltorio input[type="text"] { width: 100%; box-sizing: border-box; }
.buscador-cliente-opciones {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: var(--sombra); max-height: 220px; overflow-y: auto;
}
.buscador-cliente-opcion { padding: 10px 14px; font-size: 14px; cursor: pointer; }
.buscador-cliente-opcion:hover { background: var(--color-fondo-suave, #fafaf8); }
.buscador-cliente-opcion-vacia { padding: 10px 14px; font-size: 13px; color: var(--color-muted); }

/* El buscador de cliente va en un modal más ancho ahora, pero algunos
   nombres de empresa son muy largos igual — una letra un poco más
   chica deja ver más texto de una sin tener que agrandar más el
   modal. */
#visita-cliente-busqueda { font-size: 13px; }

/* El grupo de fecha (Desde/Hasta/Hoy/Ver todas) se mueve como un solo
   bloque si no cabe junto al selector de estado, en vez de que cada
   pieza se vaya partiendo por separado a su propia línea. */
.grupo-filtro-fecha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Barra de desplazamiento horizontal de las tablas. Aparece solo en las
   tablas que no caben en el ancho de la pantalla (en Inicio no, porque
   su tabla tiene columnas fijas que sí caben). Antes quedaba pegada
   contra la última fila y chocaba con las esquinas redondeadas, así
   que se veía "montada" sobre la tabla. Ahora: un poco de aire debajo
   de la última fila, barra delgada y con extremos redondeados. */
.tabla-envoltorio, .tabla-orden-envoltorio {
    padding-bottom: 8px;
    scrollbar-width: thin;                      /* Firefox */
    scrollbar-color: #C9C2B0 transparent;
}
.tabla-envoltorio::-webkit-scrollbar, .tabla-orden-envoltorio::-webkit-scrollbar { height: 8px; }
.tabla-envoltorio::-webkit-scrollbar-track, .tabla-orden-envoltorio::-webkit-scrollbar-track {
    background: transparent; margin: 0 12px;
}
.tabla-envoltorio::-webkit-scrollbar-thumb, .tabla-orden-envoltorio::-webkit-scrollbar-thumb {
    background: #C9C2B0; border-radius: 999px;
}
.tabla-envoltorio::-webkit-scrollbar-thumb:hover, .tabla-orden-envoltorio::-webkit-scrollbar-thumb:hover {
    background: #A79F8A;
}

/* Contraseña temporal que ve el administrador: grande, con letra de ancho fijo
   (para distinguir bien las letras) y el botón de copiar al lado. */
.clave-temporal-caja { display: flex; gap: 8px; align-items: stretch; }
.clave-temporal-caja input {
    flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace;
    font-size: 20px; letter-spacing: 0.08em; text-align: center; font-weight: 600;
}
#btn-cambiar-password { margin-bottom: 8px; }

/* ---------- Lista desplegable de varias opciones (campo seleccion_multiple) ---------- */
.campo-multiple { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo-multiple-etiqueta { font-size: 13px; font-weight: 600; color: var(--color-text); }
.select-multiple { position: relative; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }
.select-multiple summary { cursor: pointer; padding: 10px 32px 10px 12px; font-size: 14px; list-style: none; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.select-multiple summary::-webkit-details-marker { display: none; }
.select-multiple summary::after { content: '▾'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--color-muted); }
.select-multiple[open] summary::after { content: '▴'; }
.select-multiple-opciones { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 8px; border-top: 1px solid var(--color-border); }
/* El `label` global es columna: aquí se fuerza fila para que la casilla
   quede AL LADO IZQUIERDO del texto, no encima. */
.select-multiple-opciones .chk {
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: 10px; text-align: left; font-size: 14px; font-weight: 500; color: var(--color-text);
    cursor: pointer; padding: 9px 8px; border-radius: 6px;
}
.select-multiple-opciones .chk:hover { background: var(--color-bg); }
.select-multiple-opciones .chk input { width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin: 0; accent-color: var(--color-primary); }


/* =====================================================================
   CELULAR (pantallas angostas): menos saturación, tablas como tarjetas
   ===================================================================== */
html, body { overflow-x: hidden; }
/* "clip" corta igual lo que se sale por los lados, pero NO convierte la página en
   un contenedor con scroll propio: así la franja de modo soporte (position: sticky)
   se queda pegada arriba también en el celular. */
@supports (overflow-x: clip) {
    html, body { overflow-x: clip; }
}
.contenido { min-width: 0; }

@media (max-width: 720px) {
    /* Espacio arriba para el botón de menú en vez de un margen lateral
       grande que le quitaba ancho útil a todo. */
    .contenido { padding: 70px 14px 28px; }
    .encabezado-vista { flex-wrap: wrap; gap: 10px; }
    .encabezado-vista h1, .encabezado-vista h2 { font-size: 22px; }
    .tarjetas-resumen { grid-template-columns: 1fr 1fr; gap: 10px; }
    .tarjeta-resumen { padding: 14px; }
    .filtros-inicio, .filtros-visitas { flex-direction: column; align-items: stretch; }
    .filtros-inicio > *, .filtros-visitas > * { width: 100%; box-sizing: border-box; }
    .filtros-inicio select, .filtros-inicio input[type="date"] { font-size: 14px; padding: 10px 12px; }

    /* Cada fila de una tabla se convierte en una tarjeta: título de la
       columna a la izquierda y el dato a la derecha. Los títulos salen
       del encabezado de la tabla (etiquetarTablas en app.js). */
    .tabla-envoltorio { background: transparent; box-shadow: none; overflow: visible; }
    .tabla, .tabla tbody, .tabla tr { display: block; width: 100%; }
    .tabla { min-width: 0 !important; table-layout: auto !important; }
    .tabla thead { display: none; }
    .tabla tr {
        background: var(--color-surface); border-radius: var(--radio);
        box-shadow: var(--sombra); margin-bottom: 12px; padding: 4px 0; overflow: hidden;
    }
    .tabla td {
        display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;
        width: auto !important; text-align: right; padding: 9px 14px;
        white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
        overflow-wrap: anywhere;
    }
    .tabla td::before {
        content: attr(data-label); flex: 0 0 34%; text-align: left;
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.03em; color: var(--color-muted); padding-top: 2px;
    }
    .tabla td:not([data-label])::before, .tabla td.celda-vacia::before, .tabla td.acciones-fila::before { content: none; }
    .tabla td.celda-vacia { display: block; text-align: center; }
    .tabla tr:last-child td { border-bottom: 1px solid var(--color-border); }
    .tabla tr td:last-child { border-bottom: none; }
    .tabla td.acciones-fila { justify-content: flex-start; flex-wrap: wrap; gap: 6px 10px; text-align: left; }
    .tabla td.acciones-fila .boton-texto { padding: 8px 12px; margin: 0; border: 1px solid var(--color-border); border-radius: 8px; }
}

.botones-foto-orden { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.botones-foto-orden .boton { flex: 1 1 150px; }

/* Ojito de contraseña */
.campo-password { position: relative; display: flex; }
.campo-password input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.btn-ver-password {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: none; background: none; cursor: pointer;
    color: var(--color-muted); display: flex; align-items: center; justify-content: center;
}
.btn-ver-password:hover { color: var(--color-primary); }
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }


/* =====================================================================
   CONTROL DE EMPRESAS — aviso de prueba, panel de plataforma, códigos
   ===================================================================== */

/* Código de invitación en el registro */
.campo-codigo {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.ayuda-codigo { margin: -10px 0 0; }

/* Aviso arriba del contenido: días de prueba / suscripción por vencer */
.aviso-licencia {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: var(--radio);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    font-size: 14px;
    line-height: 1.45;
}
.aviso-info   { background: #FBF4E3; border-color: #E6D3A3; border-left-color: var(--color-accent); color: #6E5320; }
.aviso-alerta { background: #FAECEC; border-color: #E3BFBF; border-left-color: var(--color-danger); color: #7E2F2F; }

/* Insignias de estado de empresa y de código */
.badge-prueba     { background: #B8863B22; color: #8A6425; }
.badge-activa     { background: #3F7A5C22; color: #235A3E; }
.badge-suspendida { background: #A23E3E1c; color: #A23E3E; }
.badge-disponible { background: #3F7A5C22; color: #235A3E; }
.badge-usado      { background: #6B726820; color: #4A5047; }
.badge-vencido    { background: #A23E3E1c; color: #A23E3E; }

/* Detalles bajo el texto principal de una celda */
.celda-sub { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; font-weight: 400; }
.celda-nota { font-style: italic; }
.dias-alerta { color: var(--color-danger); font-weight: 600; }
.tecnicos-lleno { color: var(--color-danger); font-weight: 700; }
.codigo-mono {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 700; letter-spacing: 0.05em; color: var(--color-primary);
    white-space: nowrap;
}

.seccion-espaciada { margin-top: 36px; }
.ayuda-seccion { margin: 0 0 12px; }

/* Formulario para generar códigos */
.form-invitacion {
    display: grid;
    grid-template-columns: 120px 120px 120px minmax(160px, 1fr) auto;
    gap: 12px;
    align-items: end;
    background: var(--color-surface);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 16px;
    margin-bottom: 16px;
}
.form-invitacion > * { min-width: 0; }
.form-invitacion label { margin: 0; }
.form-invitacion input { margin-bottom: 0; width: 100%; min-width: 0; box-sizing: border-box; }
.celda-contenido { min-width: 0; }

/* "Ya pagó: activar y sumar" dentro de la ventana de edición */
.atajos-renovar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 12px; border-radius: 8px;
    background: #F5F1E8; border: 1px dashed var(--color-border);
    font-size: 13px; color: var(--color-muted);
}
.atajos-renovar span { margin-right: 4px; font-weight: 500; }
.atajos-renovar .boton { padding: 6px 12px; font-size: 13px; }

@media (max-width: 860px) {
    .form-invitacion { grid-template-columns: 1fr 1fr; }
    .form-invitacion .inv-nota, .form-invitacion .boton { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .aviso-licencia { font-size: 13px; padding: 10px 12px; }
    /* En las tarjetas del celular, el texto de la celda (con su detalle debajo)
       va junto, alineado a la derecha, en vez de partirse en columnas. */
    .tabla td .celda-contenido { flex: 1 1 auto; text-align: right; }
    .form-invitacion { grid-template-columns: 1fr 1fr; }
}


/* =====================================================================
   MODO SOPORTE — franja fija arriba mientras el dueño ve la cuenta de un cliente
   ===================================================================== */
.franja-soporte {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px 14px;
    /* 72px a la izquierda: deja libre el botón del menú, que va fijo en esa esquina */
    padding: 10px 20px 10px 72px;
    background: #7A2E2E; color: #fff;
    font-size: 13px; line-height: 1.4;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.franja-soporte strong { font-weight: 700; }
.boton-franja {
    background: #fff; color: #7A2E2E; border: none; border-radius: 8px;
    padding: 6px 14px; font-family: var(--fuente-cuerpo); font-size: 13px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
}
.boton-franja:hover { opacity: 0.9; }
@media (max-width: 720px) {
    .franja-soporte { padding: 8px 12px 8px 68px; font-size: 12px; }
}
/* Franja de la demostración: mismo diseño que la de soporte, en azul */
.franja-demo { background: #1F4E79; }
.franja-demo .boton-franja { color: #1F4E79; }

/* =====================================================================
   EVALUACIÓN DEL SERVICIO POR EL CLIENTE
   ===================================================================== */
.boton-evaluacion.eval-ok { color: var(--color-success); font-weight: 600; }
.boton-evaluacion.eval-pendiente { color: var(--color-accent); }
.estrellas-fijas { color: var(--color-accent); letter-spacing: 1px; white-space: nowrap; }
.texto-suave { color: var(--color-muted); font-style: italic; }

a.boton-whatsapp {
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; background: #1E9E57; color: #fff; border-color: #1E9E57;
}
a.boton-whatsapp:hover { background: #17884A; }

#modal-evaluacion textarea { width: 100%; resize: vertical; }
@media (max-width: 640px) {
    #modal-evaluacion .modal-acciones { flex-direction: column-reverse; }
    #modal-evaluacion .modal-acciones .boton { width: 100%; }
}

/* Espaciado de la pestaña Evaluaciones */
#vista-evaluaciones .tarjetas-resumen { margin-top: 18px; }
#vista-evaluaciones .fila-encabezado-seccion { margin: 30px 0 12px; }
#vista-evaluaciones .ayuda-texto { margin-top: 18px; }

.aviso-enlace-local {
    background: #FBF1DC; border: 1px solid #E5C98A; color: #6B4A12;
    border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.4; margin: 0 0 12px;
}

.aviso-enlace-local {
    background: #FBF1DC; border: 1px solid #E5C98A; color: #6B4A12;
    border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.4; margin: 0 0 12px;
}


/* Botón de WhatsApp bloqueado cuando el cliente no tiene un celular válido */
.boton-bloqueado { opacity: .45; pointer-events: none; cursor: not-allowed; }
#ev-telefono[readonly] { background: var(--color-fondo-suave, #f3f1ec); cursor: not-allowed; }


/* ---- Planos del cliente ---- */
.planos-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.plano-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px; border: 1px solid var(--color-borde, #ddd); border-radius: 10px; }
.plano-item-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planos-orden { margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--color-borde, #ddd);
    border-radius: 12px; background: var(--color-surface, #fff); }
.planos-orden summary { font-weight: 700; cursor: pointer; }
.planos-orden-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.visor-plano { position: fixed; inset: 0; z-index: 5000; background: #111; display: flex; flex-direction: column; }
.visor-plano.oculto { display: none; }
.visor-plano-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; background: #1d1d1d; color: #fff; flex-shrink: 0; }
.visor-plano-botones { display: flex; gap: 8px; }
.visor-plano-lienzo { flex: 1; overflow: auto; touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch; }
.visor-plano-lienzo img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; }

#version-app { position: fixed; bottom: 4px; left: 8px; font-size: 10px; opacity: .45; z-index: 1; pointer-events: none; }

.plano-etiqueta { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:10px; font-size:.75rem; background:#e6f0ea; color:#2d6a4f; }

/* ---- Desempeño por técnico (pantalla Evaluaciones) ---- */
.graficos-tecnicos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 16px; }
.grafico-caja { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radio); padding: 16px; }
.grafico-caja h3 { margin: 0 0 12px; font-size: .95rem; font-family: var(--fuente-display); }
.barras-h { display: flex; flex-direction: column; gap: 10px; }
.barra-fila { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; font-size: .85rem; }
.barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { display: flex; height: 20px; background: #0000000d; border-radius: 6px; overflow: hidden; }
.barra-relleno { display: block; height: 100%; background: var(--color-primary-light); border-radius: 6px; }
.barra-relleno.bueno { background: #3F7A5C; }
.barra-relleno.medio { background: #B8863B; }
.barra-relleno.bajo  { background: #A23E3E; }
.barra-valor { color: var(--color-muted); white-space: nowrap; font-size: .8rem; }
.barra-seg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; font-weight: 600; min-width: 18px; }
.barra-vacia { padding: 0 8px; line-height: 20px; }
.color-realizada { background: #3F7A5C; }
.color-pendiente { background: #3E6FA2; }
.color-vencida   { background: #A23E3E; }
.color-cancelada { background: #8C8C84; }
.leyenda-grafico { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: .78rem; color: var(--color-muted); }
.leyenda-grafico i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; }
.texto-alerta { color: var(--color-danger); }
@media (max-width: 800px) {
    .graficos-tecnicos { grid-template-columns: 1fr; }
    .barra-fila { grid-template-columns: 80px 1fr auto; }
}