/* Estilos del portal de Doctor Cómputo.
   Se usan los mismos colores que la aplicación de escritorio, para que ambas
   plataformas se vean iguales. */

:root {
    --marca:        #DC241F;
    --marca-oscura: #B71C1C;
    --texto:        #1A1A1A;
    --gris:         #475569;
    --borde:        #E2E8F0;
    --fondo:        #F5F5F5;
    --superficie:   #FFFFFF;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--fondo);
    color: var(--texto);
    line-height: 1.5;
}

/* ---------- Estructura ---------- */
.pagina { min-height: 100vh; }

/*
    AVISO DE DEMOSTRACION.

    Va arriba de todo, en todas las paginas, y tiene que verse bien sin competing con el
    contenido. Es lo primero que lee quien llega, y su trabajo es que nadie se crea que esto ya
    es un servicio en marcha.

    Decisiones:

      - Fondo claro y borde fuerte, no una barra roja. Una barra de error roja haria que el
        aviso se confundiera con un fallo de la pagina, y la gente lo pasa por alto. Esto es
        informacion, no una alarma.

      - NO es fija ni flotante. No tapa el contenido. Tapa contenido, la gente deja de poder
        hacer lo que fue a hacer, y entonces si compromete al que vino a mirar.

      - En letra chica a proposito. Es lo que tiene que leer, pero no puede ser lo mas grande
        de la pagina, porque si no se piensa que la aplicacion es un aviso de advertencia y
        nadie va a probarla.

      - Los parrafos van separados con margen corto. Uno solo seria un bloque de texto que
        nadie lee entero, y este aviso tiene cuatro ideas distintas que se deben entender por
        separado.
*/
.aviso-demo {
    background: #FFFBEB;
    border: 2px solid #F59E0B;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 auto 20px;
    max-width: 760px;
    color: #78350F;
    font-size: .85rem;
    line-height: 1.55;
}
.aviso-demo p { margin: 0 0 8px; }
.aviso-demo p:last-child { margin-bottom: 0; }
.aviso-demo strong { color: #92400E; }
.aviso-demo-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: #92400E;
}

/*
    Aviso de que ya se entro a la demostracion del taller.

    Verde porque es la unica noticia buena de la pantalla: entro. Se pone aparte del
    .aviso-confirmado porque ese es gris y de error, y mezclar "entro" con "la contrasena esta
    mal" en el mismo estilo hace que no se sepa cual de las dos cosas paso.
*/
.aviso-entrado {
    margin-top: 16px;
    padding: 12px 14px;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 10px;
    color: #14532D;
    font-size: .9rem;
    line-height: 1.55;
}
.aviso-entrado p { margin: 0; }
.aviso-entrado a { color: #14532D; font-weight: 600; }

/*
    Marca de borrador de los terminos legales.

    Va arriba del documento, con el mismo proposito que el aviso de demostracion: que nadie
    confunda un borrador con un contrato. Usa el mismo ambar y no rojo, porque no es un error:
    es un documento que todavia no esta listo, y se va a ver asi hasta que haya abogado.
*/
.aviso-borrador {
    background: #FFFBEB;
    border: 2px dashed #F59E0B;
    border-radius: 10px;
}
.aviso-borrador h2 { color: #92400E; margin-top: 0; }
.aviso-borrador p { color: #78350F; }
.aviso-borrador strong { color: #92400E; }
@media (max-width: 520px) {
    .aviso-demo { font-size: .8rem; padding: 12px 13px; border-radius: 8px; }
}

.volver {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--marca-oscura);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
}
.volver:hover { text-decoration: underline; }

/* ---------- Puerta de entrada: solo el logo ---------- */
.puerta {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 16px 56px;
}

/* ---------- Pantalla principal con las dos aplicaciones ---------- */
.dos-puertas {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 26px;
}
.puerta-caja {
    flex: 1;
    border: 2px solid var(--borde);
    border-radius: 14px;
    padding: 20px 18px 22px;
    background: #fff;
}
.puerta-caja h2 { margin: 0 0 4px; font-size: 1.3rem; }
.puerta-texto { color: var(--gris); font-size: .9rem; margin: 0 0 12px; }
.puerta-logo { padding: 0 4px; }
.puerta-logo .logo-selector { max-width: 420px; margin: 0 auto; }

.puerta-boton {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--texto);
}
.puerta-logo-taller { padding: 6px 0; }
.puerta-boton-texto {
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--marca-oscura);
    font-size: 1rem;
}
.puerta-boton-nota {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    color: var(--gris);
}
.puerta-boton:hover .puerta-boton-texto { text-decoration: underline; }

/*
    Leyenda de los cuatro iconos del logo del cliente.

    Se muestra en la pantalla principal porque ahi los botones son invisibles y sin esto
    nadie sabe que hay algo que tocar. Va siempre visible, sin depender del raton, porque
    se puede estar mirando desde un celular donde no hay raton.
*/
.logo-leyenda {
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 4px 0;
    border-top: 1px solid var(--borde);
}
.logo-leyenda li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: .82rem;
    color: var(--gris);
    margin-bottom: 5px;
}
.logo-leyenda strong {
    color: var(--marca-oscura);
    min-width: 78px;
    font-weight: 700;
}

/*
    En pantalla angosta las dos puertas se apilan, una debajo de la otra. Con dos logos
    lado a lado en un celular, cada uno quedaria con la mitad del ancho y no se veria
    ninguno de los dos.
*/
@media (max-width: 760px) {
    .dos-puertas { flex-direction: column; }
    .puerta-logo-taller { padding: 0; }
}

.nota-honesta {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 12px;
}
.nota-honesta h2 { color: var(--marca-oscura); margin-top: 0; }

/* ---------- Logo de la aplicación del taller ---------- */
.logo-taller { text-align: center; margin: 8px 0 4px; }
.logo-taller-svg {
    width: 100%;
    max-width: 400px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.logo-taller-boton { display: block; line-height: 0; }
.logo-taller-pie {
    font-size: .82rem;
    color: var(--gris);
    font-style: italic;
    margin: 12px 0 0;
}

.niveles {
    margin: 4px 0 18px;
    padding: 12px 14px;
    background: #F8FAFC;
    border-radius: 8px;
}
.niveles .ayuda { margin-bottom: 8px; font-weight: 600; color: var(--texto); }
.niveles .lista li:last-child { margin-bottom: 0; }

.accesos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 28px;
}
.acceso {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 13px 16px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    text-decoration: none;
    color: var(--texto);
    transition: border-color .15s ease, background .15s ease;
}
.acceso:hover { border-color: var(--marca); background: #FFFBFB; }
.acceso-titulo { font-weight: 600; font-size: .95rem; }
.acceso-detalle { color: var(--gris); font-size: .82rem; }

/* Acceso del taller: pequeno, al pie y sin llamarla la atencion. Ver la nota de Home.razor. */
.pie-puerta { margin-top: 40px; text-align: center; }
.acceso-taller {
    display: inline-block;
    padding: 8px 14px;
    font-size: .78rem;
    color: var(--gris);
    text-decoration: none;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: transparent;
    transition: color .15s ease, border-color .15s ease;
}
.acceso-taller:hover { color: var(--marca-oscura); border-color: var(--marca); }

.lista { margin: 0; padding-left: 20px; }
.lista li { margin-bottom: 10px; font-size: .9rem; }

.dos-columnas { display: flex; gap: 14px; flex-wrap: wrap; }
.dos-columnas .campo { flex: 1 1 160px; }

/*
    Fecha y hora del formulario, una al lado de la otra.

    El cliente lo pidió: sueltas, cada caja ocupa todo el ancho de la pantalla y se ven
    alargadas, como un formulario medio vacío. Juntas ocupan el mismo ancho pero parecen
    un solo control de "cuándo", que es lo que son.

    Dos cosas deliberadas:

      - flex-wrap: wrap. En una pantalla angosta (un celular viejo, una tablet en
        vertical) las dos cajas bajan solas a una fila, sin reglas especiales para cada
        tamaño y sin tener que decidir de antemano en qué ancho se rompe.

      - flex: 1 1 200px. La base de 200px es el mínimo cómodo. Si no cabe de a dos, cada
        una toma el ancho entero y se ve igual que antes, que es mejor que una caja de 90
        pixeles con la fecha cortada en dos renglones.

    OJO: esta clase se llama fecha-y-hora y no fecha-hora a propósito. "fecha-hora" ya la
    usa Aviso.razor para la línea gris chica que dice "a las 10:30", y si compartieran el
    nombre, esta de aquí le pondría el tamaño de letra y el color gris de aquella.
*/
.fecha-y-hora {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.fecha-y-hora .campo { flex: 1 1 200px; margin-bottom: 0; }

.portada {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

.cabecera { text-align: center; margin-bottom: 8px; }
.cabecera h1 { font-size: 1.6rem; margin: 0 0 4px; }
.subtitulo { color: var(--gris); font-size: .95rem; margin: 0; }

/* ---------- Logo ---------- */
.logo-selector { text-align: center; margin: 16px 0 8px; }
.logo-svg {
    width: 100%;
    max-width: 440px;
    height: auto;
    display: block;
    margin: 0 auto;
}
.logo-pie {
    font-size: .82rem;
    color: var(--gris);
    font-style: italic;
    margin: 10px 0 0;
}
.logo-pie strong { color: var(--marca-oscura); font-style: normal; }

/* ---------- Clientes ---------- */
.lista-clientes { margin-top: 10px; }
.cliente-fila {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--borde);
    padding: 4px 0;
    flex-wrap: wrap;
}
.cliente-boton {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background: none;
    border: none;
    padding: 8px 6px;
    cursor: pointer;
    font-family: inherit;
    border-radius: 8px;
    min-width: 200px;
}
.cliente-boton:hover { background: #F7F7F8; }
.cliente-nombre { font-weight: 700; font-size: .98rem; color: var(--texto); }
.cliente-datos { font-size: .82rem; color: var(--gris); }
.cliente-otros { font-size: .76rem; color: var(--marca-oscura); }
.cliente-tipo {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    align-self: flex-start;
}
.tipo-persona { color: #1D4ED8; }
.tipo-empresa { color: #7C2D12; }

/*
    El boton de elegir persona o empresa.

    Son dos botones y no un <select>, porque el dueño lo pidió así y además en un celular se ve
    mejor que una lista escondida que hay que desplegar.

    El elegido se marca con fondo y borde. El detalle de cada uno va abajo, porque es lo que
    explica la diferencia: la empresa pide cédula jurídica y la persona no.
*/
.tipo-cliente { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.tipo-boton {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 14px 16px;
    border: 2px solid var(--borde);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.tipo-boton:hover { border-color: var(--marca); }
.tipo-elegido { border-color: var(--marca); background: #FEF2F2; }
.tipo-nombre { font-weight: 700; font-size: 1rem; color: var(--texto); }
.tipo-detalle { font-size: .8rem; color: var(--gris); line-height: 1.4; }

@media (max-width: 520px) {
    .cliente-fila { flex-direction: column; align-items: stretch; }
    .tipo-boton { min-width: 100%; }
}

/* ---------- Configuración del taller ---------- */
.aviso-config {
    background: #FEF2F2;
    border: 2px solid #FECACA;
    border-radius: 12px;
}
.aviso-config h2 { color: var(--marca-oscura); margin-top: 0; }
.aviso-config strong { color: #B91C1C; }

.aviso-ok {
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 10px;
    padding: 10px 14px;
    color: #14532D;
    font-size: .9rem;
}
.aviso-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 10px 14px;
    color: #B91C1C;
    font-size: .9rem;
}

/* ---------------------------------------------------------------------------
   OLVIDÓ SU CONTRASEÑA. Agregado el 10 de octubre de 2026.
   ---------------------------------------------------------------------------
   Va debajo del botón de entrar, con una línea de separación para que se lea como
   una cosa aparte y no como parte del formulario de acceso. Es un botón de texto,
   sin caja: la acción secundaria no tiene que competir con la principal. */
.recuperar {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

.enlace-plano {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: .88rem;
    color: var(--marca);
    text-decoration: underline;
    cursor: pointer;
}
.enlace-plano:hover { color: var(--marca-oscura); }
.enlace-plano:disabled { opacity: .45; cursor: not-allowed; }

.recuperar .campo { margin-top: 12px; }
.recuperar .ayuda { margin-top: 10px; }

.lista-usuarios { margin-top: 12px; }
.usuario-fila {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
    flex-wrap: wrap;
}
.usuario-inactivo { opacity: .55; background: #FAFAFA; }
.usuario-datos { display: flex; flex-direction: column; gap: 3px; }
.usuario-datos strong { font-size: 1rem; color: var(--texto); }
.usuario-datos > span { font-size: .84rem; color: var(--gris); }
.usuario-contacto {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .8rem;
    color: var(--gris);
}
.usuario-baja {
    color: #B91C1C;
    font-weight: 600;
    font-size: .78rem;
}
.usuario-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.nivel-opcion {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 2px 10px;
    align-items: center;
    padding: 12px 14px;
    border: 2px solid var(--borde);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}
.nivel-opcion:hover { border-color: var(--marca); }
.nivel-elegido { border-color: var(--marca); background: #FEF2F2; }
.nivel-opcion input { grid-row: 1 / 3; }
.nivel-nombre { font-weight: 700; color: var(--texto); font-size: .95rem; }
.nivel-resumen { font-size: .82rem; color: var(--gris); line-height: 1.4; }

.texto-etiqueta {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 5px;
}

/* En pantalla angosta la lista de usuarios se apila, para que los botones no queden
   apretados contra el borde. */
@media (max-width: 520px) {
    .usuario-fila { flex-direction: column; }
    .usuario-acciones { width: 100%; }
}

/* ---------- Bloques ---------- */
.bloque {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 18px;
    margin: 18px 0;
}
.bloque h2 { font-size: 1.05rem; margin: 0 0 4px; }
.bloque p { margin: 0 0 10px; font-size: .92rem; }
.ayuda { color: var(--gris); font-size: .85rem; margin: 0 0 14px; }

/* -----------------------------------------------------------------------------
   LINEAS DE CONTACTO. 13 DE OCTUBRE DE 2026.

   El sobre y el cuadro de WhatsApp van al lado del correo y del numero, en la portada y en
   el portal del cliente.

   DECISIONES:

   - 'flex' y no una tabla: son dos renglones nada mas, y en una pantalla angosta el 'flex-wrap'
     los baja solos sin reglas para cada tamano.

   - 'flex: 0 0 22px' en el icono. Sin esto, 'align-items: center' estira el icono a lo alto del
     renglon y un sobre de 22 pixeles queda con espacio de mas arriba y abajo. Lo que dice es:
     ni crezcas ni encojas, mide 22. Es el mismo problema del arreglo de '.dos-columnas' del 13 de
     octubre: cuando la direccion del 'flex' cambia, el valor que estaba en unaDimensione pasa
     a la otra.

   - El numero del WhatsApp va como TEXTO y no como enlace. Un enlace a 'wa.me' con un digito mal
     mandado manda el mensaje de un desconocido, y eso no se puede deshacer. Texto equivocado se
     corrige; mensaje enviado a otra persona, no. Cuando el dueno este confirmado, el enlace se
     agrega en un minuto.

   - 'alt=""' en los dos iconos: son de adorno, el texto al lado ya dice que es. Con texto
     alternativo, un lector de pantalla anunciaria "imagen de sobre, imagen de WhatsApp" antes de
     leer el correo, que es redundante.
   --------------------------------------------------------------------------- */
.lineas-contacto {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}
.lineas-contacto li {
    display: flex;
    align-items: center;
    gap: 9px;
}
.lineas-contacto .ayuda { margin: 0; }
.icono-contacto {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: block;
}

/* ---------- Casillas ---------- */
.casilla {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--borde);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.casilla:hover { border-color: var(--marca); background: #FFFBFB; }
.casilla input[type="checkbox"] {
    width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--marca);
}
.casilla-texto { display: flex; flex-direction: column; gap: 3px; }
.casilla-titulo { font-weight: 600; font-size: .95rem; }
.casilla-detalle { color: var(--gris); font-size: .82rem; }

.subcategoria {
    margin-top: 8px;
    padding: 9px 10px;
    font-size: .9rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    max-width: 340px;
}

/* ---------- Campos ---------- */
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }

/* ---------------------------------------------------------------------------
   FORMULARIOS QUE SE APILAN. Agregado el 11 de octubre de 2026.

   EL ERROR QUE ESTO ARREGLA

   Varias pantallas usaban una clase llamada 'formulario-alta' que NUNCA se DEFINIO en esta hoja
   de estilos. Como no existia, sus etiquetas no tenian ninguna regla y se dibujaron en la misma
   linea: el texto 'Contrasena' quedaba al lado del campo del telefono, y el campo de la
   contrasena se caia a la linea siguiente, pegado al boton.

   Es el mismo error del primer dia, por tercera vez: algo que se usa y no esta declarado. Un
   nombre de clase no es un detalle, es codigo. Si no existe en la hoja, no existe en ninguna
   parte, y el navegador no avisa: dibuja cualquier cosa.

   Se define con los MISMOS valores que ya usa '.campo', para que un formulario se vea igual que
   el resto del programa y no haya dos estilos parecidos.
   --------------------------------------------------------------------------- */
.formulario-alta .campo { margin-bottom: 16px; }

/* El boton de un formulario va separado del ultimo campo. Pegado se lee como parte del campo de
   arriba, y con un formulario de seis campos eso es facil. */
.boton-tras-formulario { margin-top: 22px; }
.campo input, .campo textarea {
    width: 100%;
    padding: 11px 12px;
    font-size: .95rem;
    font-family: inherit;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    color: var(--texto);
}
.campo input:focus, .campo textarea:focus, .subcategoria:focus {
    outline: 2px solid var(--marca);
    outline-offset: 1px;
    border-color: var(--marca);
}

/* ---------- Envío ---------- */
.resumen { color: var(--marca-oscura); font-weight: 600; font-size: .9rem; margin: 4px 0 10px; }

.enviar {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    color: #fff;
    background: var(--marca);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.enviar:hover:not(:disabled) { background: var(--marca-oscura); }
.enviar:disabled { opacity: .45; cursor: not-allowed; }

.aviso {
    margin-top: 16px;
    padding: 14px;
    background: #FEF3C7;
    border-left: 4px solid #D97706;
    border-radius: 8px;
    font-size: .88rem;
    color: #7C4A03;
}

/* ---------- Preguntas por servicio ---------- */
/* Un bloque por servicio marcado, con las preguntas propias de ese servicio. */
.preguntas {
    border-left: 4px solid var(--marca);
    padding: 14px 0 4px 16px;
    margin-bottom: 22px;
}
.preguntas:last-child { margin-bottom: 4px; }
.preguntas-titulo {
    font-size: .95rem;
    font-weight: 700;
    color: var(--marca-oscura);
    margin: 0 0 12px;
}

/* ---------- Aplicación del taller ---------- */
.taller-resumen { max-width: 560px; margin: 26px auto 0; }

.taller-quien {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: 10px; margin-bottom: 14px;
}
.taller-nombre { font-weight: 700; }
.taller-nivel { font-size: .78rem; color: var(--gris); }

.taller-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.taller-tarjeta {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 14px 8px; background: var(--superficie);
    border: 1px solid var(--borde); border-radius: 10px;
    text-decoration: none; color: var(--texto); text-align: center;
}
.taller-cifra { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.taller-texto { font-size: .74rem; color: var(--gris); }

/* Cuando hay cambios sin subir, el borde se enciende. Es lo unico que el tecnico
   necesita ver de un vistazo antes de apagar el equipo. */
.taller-tarjeta-avisa { border-color: #D97706; background: #FFFBEB; }
.taller-tarjeta-avisa .taller-cifra { color: #B45309; }

.taller-menu { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.taller-menu a {
    padding: 12px 16px; background: var(--superficie);
    border: 1px solid var(--borde); border-radius: 10px;
    text-decoration: none; color: var(--texto); font-size: .92rem;
}
.taller-menu a:hover { border-color: var(--marca); background: #FFFBFB; }

.taller-salir {
    width: 100%; padding: 11px; font-family: inherit; font-size: .88rem;
    color: var(--gris); background: transparent;
    border: 1px solid var(--borde); border-radius: 9px; cursor: pointer;
}
.taller-salir:hover { color: var(--marca-oscura); border-color: var(--marca); }

/* ---------- Solicitudes y ordenes ---------- */
.solicitud-cabecera {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.solicitud-cabecera h2 { margin: 0; font-size: 1.02rem; }
.solicitud-abierta { border-left: 4px solid var(--marca); }

.etiqueta {
    flex-shrink: 0; padding: 3px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.etiqueta-roja { background: #FEE2E2; color: #991B1B; }
.etiqueta-azul { background: #DBEAFE; color: #1E40AF; }
.etiqueta-verde { background: #DCFCE7; color: #14532D; }
.etiqueta-gris { background: #F1F5F9; color: #475569; }

.solicitud-datos p { margin: 0 0 6px; font-size: .9rem; }
.solicitud-texto {
    padding: 10px 12px; background: #F8FAFC;
    border-left: 3px solid var(--borde); border-radius: 0 6px 6px 0;
    font-size: .9rem; line-height: 1.5;
}
.solicitud-fecha { color: var(--marca-oscura); font-weight: 600; }
.solicitud-contacto { color: var(--gris); font-size: .84rem; }
.solicitud-convertida { margin: 10px 0 0; font-size: .88rem; }

.solicitud-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.boton-primario, .boton-neutro, .boton-peligro {
    flex: 1 1 auto; min-width: 130px; padding: 11px 16px;
    font-family: inherit; font-size: .88rem; font-weight: 600;
    border-radius: 9px; cursor: pointer; border: 1px solid transparent;
}
.boton-primario { background: var(--marca); color: #fff; }
.boton-primario:hover:not(:disabled) { background: var(--marca-oscura); }
.boton-neutro { background: #fff; color: var(--marca-oscura); border-color: var(--marca); }
.boton-neutro:hover { background: #FEF2F2; }
.boton-peligro { background: #fff; color: #B91C1C; border-color: #FCA5A5; }
.boton-peligro:hover { background: #FEF2F2; }
.boton-primario:disabled, .boton-neutro:disabled { opacity: .5; cursor: not-allowed; }

.historial { margin-top: 12px; font-size: .86rem; }
.historial summary { cursor: pointer; color: var(--gris); font-weight: 600; }
.historial ul { margin: 10px 0 0; padding-left: 18px; }
.historial li { margin-bottom: 7px; }
.historial li span { color: var(--gris); font-size: .8rem; margin-left: 6px; }

.vaciar-confirmacion { border-color: #FCA5A5; background: #FEF2F2; }
.vaciar-confirmacion p { font-size: .9rem; }

/* Subtitulos dentro de un bloque, para las secciones de los terminos que tienen
   apartados numerados (7.1, 7.2, ...). */
.bloque h3.sub {
    font-size: .92rem;
    font-weight: 700;
    color: var(--marca-oscura);
    margin: 16px 0 4px;
}
.bloque h3.sub:first-of-type { margin-top: 12px; }

/* Numero de version, en la esquina. Pequeno y a un lado, para no molestar, pero siempre
   visible: sirve para saber que build esta corriendo en el dispositivo. */
.version-app {
    position: fixed;
    right: 8px;
    bottom: 6px;
    z-index: 5;
    font-size: .64rem;
    color: #A8B0BC;
    font-family: ui-monospace, Consolas, monospace;
    pointer-events: none;
    user-select: none;
}

/* -----------------------------------------------------------------------------
   BARRA DE ERROR DE BLAZOR
   -----------------------------------------------------------------------------
   Se ponio aqui a mano porque antes vivia en MainLayout.razor.css, y cuando se borro ese
   archivo (venia con el menu morado de la plantilla de Blazor) se llevo consigo las reglas
   que ocultan esta barra.

   El efecto fue que la barra aparecia SIEMPRE, aunque no hubiera ningun error. Un cliente
   la vio y reporto "hay un error abajo a la izquierda", y no lo habia: era la barra sin
   ocultar.

   display:none es el estado normal. Blazor la muestra por su cuenta cuando hay un error de
   verdad, escribiendole display:block.
   -------------------------------------------------------------------------- */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 12px 18px;
    background: #FFFBEB;
    border-top: 3px solid #D97706;
    color: #78350F;
    font-size: .88rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .12);
}

/* ---------------------------------------------------------------------------
   LA BARRA CUANDO YA SE MOSTRO. CORREGIDO EL 11 DE OCTUBRE DE 2026.

   'align-items' y 'gap' estaban en la regla de arriba, y ahi NO HACIAN NADA: son de los que
   solo funcionan si el elemento es una caja flexible o una rejilla, y nunca se habia puesto
   'display: flex'. Como Blazor, cuando hay un error de verdad, le pone 'display: block' desde
   el propio JavaScript, la barra se dibujaba sin la separacion que se le habia pedido y todo
   quedaba pegado en una sola linea.

   NO se podia arreglar poniendo 'display: flex' en la regla de arriba: esa regla gana sobre
   'display: none' y la barra se veria SIEMPRE, aunque no hubiera ningun error. Por eso va
   aparte, y solo aplica cuando el navegador ya le puso algo en el atributo style.
   --------------------------------------------------------------------------- */
#blazor-error-ui[style*="block"] {
    display: flex;
    align-items: center;
    gap: 10px;
}
#blazor-error-ui .reload {
    color: #B45309;
    font-weight: 700;
    margin-left: 6px;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 14px;
    top: 12px;
    font-size: 1rem;
    line-height: 1;
}

/* -----------------------------------------------------------------------------
   TEXTO DE LA BARRA DE ERROR
   --------------------------------------------------------------------------
   Se agrego el 9 de octubre de 2026. Antes la barra decia en una sola linea
   "Ocurrio un error inesperado. Recargar", que no le dice nada a nadie. Ahora
   explica la situacion y, con ?diagnostico=1, ensena el mensaje real del fallo.

   El detalle se ve solo con ese parametro a proposito: el texto crudo de un
   error dice nombres de clases y rutas internas, y eso no se le muestra a
   quien abre la pagina. La misma razon esta escrita en Error.razor.
*/
#blazor-error-ui .error-titulo {
    font-weight: 700;
    margin: 0 0 4px;
    font-size: 1rem;
}
#blazor-error-ui .error-ayuda {
    margin: 0 0 8px;
    font-size: 0.9rem;
    opacity: 0.9;
}
#blazor-error-ui .error-detalle {
    display: none;
    max-height: 30vh;
    overflow: auto;
    margin: 10px 0 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}
#blazor-error-ui .error-detalle:not(:empty) {
    display: block;
}

/* -----------------------------------------------------------------------------
   AVISO DE VERSION NUEVA
   -------------------------------------------------------------------------- */
.hay-version-nueva {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: #1A1A1A;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
    font-size: .88rem;
    max-width: calc(100vw - 32px);
}
.hay-version-nueva button {
    padding: 7px 15px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    color: #fff;
    background: var(--marca);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
}
.hay-version-nueva button:hover { background: var(--marca-oscura); }

/* ---------- Adaptación a celular ---------- */
@media (max-width: 480px) {
    .portada { padding: 16px 12px 48px; }
    .puerta { padding: 18px 12px 40px; }
    .cabecera h1 { font-size: 1.3rem; }
    .bloque { padding: 14px; }

    /*
        ESTA LINEA FALTA, Y ES LO QUE HACIA QUE LOS CAMPOS SE ESTIRARAN EN EL CELULAR. 13 DE OCTUBRE DE 2026.

        Arriba, '.dos-columnas .campo' dice 'flex: 1 1 160px'. Mientras la caja esta en FILA,
        esos 160 pixeles son de ANCHO y todo esta bien: los dos campos se reparten el ancho de
        la pantalla, que es justo lo que se pidió.

        Esta regla pone 'flex-direction: column'. Y al cambiar de eje, los MISMOS 160 pixeles
        pasan a ser de ALTO, y el 'flex-grow: 1' sigue activo: cada campo se estira hacia
        abajo hasta llenar la pantalla. En un celular, donde la pantalla es alta, eso deja
        campos de teléfono y correo de trescientos pixeles de alto con huecos enormes entre
        ellos.

        Es el mismo error en los dos ejes, el alto y el ancho. Por eso solo se veía en el
        celular y nunca en la computadora.

        La solución es una línea y es devolverle a cada campo su tamaño natural cuando ya no
        van de lado, sino uno debajo del otro. 'flex: 0 0 auto' dice: no crezcas, no encogas,
        mide lo que mides.
    */
    .dos-columnas { flex-direction: column; gap: 0; }
    .dos-columnas .campo { flex: 0 0 auto; }

    .taller-tarjetas { grid-template-columns: 1fr; }
    .solicitud-cabecera { flex-direction: column; gap: 6px; }
    .solicitud-acciones .boton-primario,
    .solicitud-acciones .boton-neutro,
    .solicitud-acciones .boton-peligro { min-width: 100%; }
}

/* ---------- Aviso al cliente ---------- */
.portada.ancha { max-width: 880px; }

.aviso-destacado { border-left: 5px solid var(--marca); }
.aviso-destacado h1 { font-size: 1.25rem; margin: 0 0 4px; }

.aviso-acceso { border-left: 4px solid #B45309; background: #FFFBEB; }
.aviso-acceso p { margin: 0; font-size: .9rem; color: #78350F; }

.texto-aviso { font-size: .98rem; line-height: 1.6; margin: 0 0 12px; }

.referencia {
    color: var(--gris);
    font-size: .82rem;
    margin: 0;
    font-family: ui-monospace, Consolas, monospace;
}

.fecha-confirmada {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px;
    margin-bottom: 16px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
}
.fecha-dia { font-size: 2rem; font-weight: 700; color: var(--marca); line-height: 1; }
.fecha-mes { font-size: 1.05rem; font-weight: 600; }
.fecha-hora { font-size: .9rem; color: var(--gris); }

.enviar.secundario {
    background: #fff;
    color: var(--marca-oscura);
    border: 1px solid var(--marca);
}
.enviar.secundario:hover:not(:disabled) { background: #FEF2F2; }

.campo-reprogramar { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borde); }

.aviso-confirmado {
    margin: 0 0 18px;
    padding: 14px;
    background: #F0FDF4;
    border-left: 4px solid #16A34A;
    border-radius: 8px;
    font-size: .9rem;
    color: #14532D;
}

/* Botón con la marca, para la vista de prueba. */
.boton-app {
    display: inline-block;
    padding: 13px 26px;
    background: var(--marca);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    border-radius: 8px;
}
.boton-app:hover { background: var(--marca-oscura); }

/* ---------- Vista de prueba del aviso ---------- */
.emergente {
    max-width: 340px;
    margin: 0 auto;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #D5D8DC;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
}
.emergente-cabecera {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .74rem;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}
.emergente-icono { width: 18px; height: 18px; border-radius: 4px; }
.emergente-titulo { margin: 0 0 2px; font-weight: 700; font-size: .92rem; }
.emergente-cuerpo { margin: 0; font-size: .86rem; line-height: 1.4; color: #334155; }

.correo-marco {
    padding: 12px;
    background: #E9EDF2;
    border-radius: 10px;
    overflow-x: auto;
}
.correo-marco table { margin: 0 auto; }

.texto-plano {
    margin: 0;
    padding: 14px;
    background: #F8FAFC;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------------------------
   LA PORTADA CON LOS TRES PORTALES
   Agregado el 8 de octubre de 2026.

   Estas cuatro reglas no existian y la pagina nueva las usa. Sin ellas la pagina funciona, pero
   el portal del taller queda pegado a la izquierda en vez de centrado, y los avisos de "en
   construccion" salen con el mismo cuerpo de letra que el resto, que es justo lo que hace que no
   se lean como avisos.
   --------------------------------------------------------------------------- */

/* El portal del taller va abajo de los otros dos, y centrado, porque es el que tiene usuarios y
   contrasena y es el serious: no es lo mismo que una puerta publica. */
.bloque-taller {
  text-align: center;
  margin: 28px 0 8px;
  padding: 20px 16px 24px;
  border: 2px solid var(--marca);
  border-radius: 14px;
}

.bloque-taller h2 { margin: 0 0 4px; font-size: 1.3rem; }
.bloque-taller .puerta-texto { max-width: 34rem; margin: 0 auto 16px; }
.bloque-taller .puerta-logo-taller { max-width: 320px; margin: 0 auto; }

/* El aviso de "en construccion". Va con borde y en italica a proposito: tiene que leerse como una
   advertencia, no como un texto mas de la tarjeta. Sin esto, el que llena el formulario y le da
   enviar no tiene forma de saber que la pagina aun no hace nada. */
.puerta-aviso {
  display: inline-block;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid #d9a441;
  border-radius: 8px;
  background: #fff8e6;
  color: #8a5a00;
  font-size: .85rem;
  font-style: italic;
}

/* La linea que dice que ya se cargaron los ejemplos, y el boton de borrarlos. */
.demos-nota {
  margin: 0 0 10px;
  color: var(--gris);
  font-size: .9rem;
}

.demo-borrar {
  border: 1px solid var(--gris);
  border-radius: 10px;
  padding: 10px 18px;
}

.demo-borrar .puerta-boton-texto { color: var(--gris); }
.demo-borrar:hover .puerta-boton-texto { text-decoration: none; }

/* ---------------------------------------------------------------------------
   EL REGISTRO DEL CLIENTE
   9 de octubre de 2026.
   --------------------------------------------------------------------------- */

.registro-form { max-width: 640px; margin: 0 auto; text-align: left; }

.registro-tipo { display: flex; gap: 8px; margin: 0 0 18px; }

.registro-tipo-boton {
  flex: 1; padding: 11px 8px; cursor: pointer;
  border: 2px solid #d5d8dc; border-radius: 10px;
  background: #fff; color: var(--gris);
  font-size: .95rem; font-weight: 600;
}
.registro-tipo-boton.activo { border-color: var(--marca); color: var(--marca-oscura); background: #fff8f8; }

/* La leyenda de campo opcional. Va en gris y en pequeno, al lado del titulo, para que se lea
   sin tener que buscar el asterisco. */
.opcional {
  margin-left: 6px; color: var(--gris); font-size: .8rem; font-weight: 400; font-style: italic;
}

/* El asterisco de obligatorio. Rojo y con title, para que tambien se vea en el celular. */
.obligatorio { color: #c62828; font-weight: 700; margin-left: 2px; }

.campo-ayuda { display: block; margin-top: 4px; color: var(--gris); font-size: .82rem; }

.registro-enviar {
  width: 100%; margin-top: 20px; padding: 14px;
  border: 0; border-radius: 10px;
  background: var(--marca); color: #fff;
  font-size: 1.05rem; font-weight: 700; cursor: pointer;
}
.registro-enviar:disabled { opacity: .55; cursor: default; }

.registro-nota-legajo { margin: 10px 0 0; text-align: center; color: var(--gris); font-size: .85rem; }

.registro-aviso-legal {
  margin: 18px 0 0; padding: 12px 14px;
  border: 1px solid #d5d8dc; border-radius: 10px;
  background: #f7f9fa; color: var(--gris); font-size: .85rem; line-height: 1.5;
}

.registro-error {
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px solid #c62828; border-radius: 8px;
  background: #fdecea; color: #a01c1c; font-size: .9rem;
}

.registro-ok {
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px solid #2e7d32; border-radius: 8px;
  background: #e8f5e9; color: #1b5e20; font-size: .9rem;
}

.registro-aviso {
  max-width: 640px; margin: 0 auto 20px; padding: 14px;
  border: 1px solid #d9a441; border-radius: 10px;
  background: #fff8e6; color: #8a5a00; font-size: .9rem; text-align: left;
}
.registro-aviso-ok { border-color: #2e7d32; background: #e8f5e9; color: #1b5e20; }
.registro-aviso p { margin: 0 0 10px; }

.registro-link, .registro-link-boton {
  display: inline-block; margin: 0 0 0 6px;
  border: 0; background: none; padding: 0;
  color: var(--marca-oscura); font-weight: 700;
  text-decoration: underline; cursor: pointer; font-size: inherit;
}

.registro-link-bloque { margin: 22px 0 0; text-align: center; color: var(--gris); font-size: .9rem; }

/* Dos campos en una fila, para los pares que siempre van juntos: los dos telefonos y los dos
   correos. En pantalla angosta se apilan, porque en un celular dos campos lado a lado quedan
   ilegibles. */
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

@media (max-width: 560px) {
  .campo-doble { grid-template-columns: 1fr; }
}

/* El candado del portal del taller. Va arriba del logo, en un circulo, para que se note antes
   de tocar nada: es el unico de los tres portales que tiene datos adentro. Lo pidió el dueño el
   9 de octubre. */
.candado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: -10px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.nota-candado { font-weight: 600; }