/* ==========================================================================
   TransAlcaide App — sistema de diseño compartido
   Paleta azul corporativa, limpia. Un único archivo para las 4 pantallas.
   ========================================================================== */

:root{
    --azul-900:#044A7F;
    --azul-700:#0B5D99;
    --azul-600:#136FB5;
    --azul-200:#BFE0F7;
    --azul-100:#EAF4FC;
    --azul-050:#F5FAFE;
    --linea:#D7E3EE;
    --verde:#2F9E6B;
    --verde-bg:#E7F6EF;
    --rojo:#D64545;
    --rojo-bg:#FCEAEA;
    --gris-texto:#5C6B7A;
    --blanco:#FFFFFF;
    --radio:16px;
    --radio-sm:10px;
    --sombra:0 2px 14px rgba(4,74,127,0.10);
    --fuente:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*{ box-sizing:border-box; }

html,body{
    margin:0;
    padding:0;
    background:var(--azul-050);
    font-family:var(--fuente);
    color:var(--azul-900);
    -webkit-text-size-adjust:100%;
}

body{
    padding:12px;
}

form{
    display:block;
}

/* Contenedor centrado: se ve bien tanto en móvil como en pantalla ancha */
.app-shell{
    max-width:420px;
    margin:0 auto;
}

/* ---------- Cabecera / logo ---------- */
.topbar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:var(--blanco);
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    margin-bottom:12px;
}

.topbar img{
    height:44px;
    width:auto;
    display:block;
}

.topbar .titulo{
    font-size:15px;
    font-weight:800;
    letter-spacing:.02em;
    color:var(--azul-900);
    line-height:1.2;
}

.topbar .subtitulo{
    font-size:12px;
    font-weight:600;
    color:var(--azul-600);
}

/* ---------- Tarjetas ---------- */
.card{
    background:var(--blanco);
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    padding:16px;
    margin-bottom:12px;
}

.card + .card{ margin-top:0; }

/* ---------- Etiquetas y campos ---------- */
.eyebrow{
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--azul-600);
    margin-bottom:4px;
}

.field{
    margin-bottom:14px;
}

.field:last-child{ margin-bottom:0; }

.field-row{
    display:flex;
    gap:12px;
}

.field-row .field{
    flex:1;
    min-width:0;
}

/* Texto de solo lectura: se ve como dato, no como un input vacío */
.valor-lectura{
    font-size:15px;
    font-weight:600;
    color:var(--azul-900);
    word-break:break-word;
}

/* Inputs editables (contenedor, precinto...) */
.input-editable{
    width:100%;
    font-family:var(--fuente);
    font-size:15px;
    font-weight:600;
    color:var(--azul-900);
    background:var(--azul-050);
    border:1.5px solid var(--linea);
    border-radius:var(--radio-sm);
    padding:10px 12px;
    min-height:44px;
}

.input-editable:focus{
    outline:none;
    border-color:var(--azul-600);
    background:var(--blanco);
}

/* Neutraliza el estilo por defecto de los TextBox de solo lectura de WebForms */
.txt-plano{
    border:none;
    background:transparent;
    font-family:var(--fuente);
    color:var(--azul-900);
    font-size:15px;
    font-weight:600;
    width:100%;
    padding:0;
}

.txt-plano:disabled{
    color:var(--azul-900);
    -webkit-text-fill-color:var(--azul-900);
    opacity:1;
}

/* ---------- Insignias I/E ---------- */
.badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
}
.badge-imp{ background:var(--azul-100); color:var(--azul-700); }
.badge-exp{ background:var(--verde-bg); color:var(--verde); }

/* ---------- Botones ---------- */
.btn-primario,
.btn-primario:visited{
    display:block;
    width:100%;
    text-align:center;
    background:var(--azul-600);
    color:var(--blanco) !important;
    font-family:var(--fuente);
    font-weight:800;
    font-size:16px;
    letter-spacing:.01em;
    border:none;
    border-radius:var(--radio-sm);
    padding:15px 12px;
    min-height:52px;
    cursor:pointer;
}
.btn-primario:hover{ background:var(--azul-700); }
.btn-primario:disabled{ background:var(--linea); color:var(--gris-texto) !important; }

.btn-fantasma{
    display:block;
    width:100%;
    text-align:center;
    background:transparent;
    color:var(--azul-600);
    font-family:var(--fuente);
    font-weight:700;
    font-size:14px;
    border:1.5px solid var(--azul-200);
    border-radius:var(--radio-sm);
    padding:11px 12px;
    min-height:44px;
    cursor:pointer;
}

.btn-salir{
    display:block;
    width:100%;
    text-align:center;
    background:var(--azul-100);
    color:var(--azul-900);
    font-family:var(--fuente);
    font-weight:700;
    font-size:14px;
    border:none;
    border-radius:var(--radio-sm);
    padding:11px 12px;
    min-height:44px;
    cursor:pointer;
}

.acciones{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:14px;
}

.acciones-fila{
    display:flex;
    gap:8px;
}
.acciones-fila > *{ flex:1; }

/* Botones de foto: píldora con icono */
.btn-foto{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:100%;
    background:var(--azul-100);
    color:var(--azul-700);
    font-family:var(--fuente);
    font-weight:700;
    font-size:13px;
    border:1.5px dashed var(--azul-200);
    border-radius:999px;
    padding:10px 8px;
    min-height:44px;
    cursor:pointer;
}
.btn-foto.hecha{
    background:var(--verde-bg);
    color:var(--verde);
    border-style:solid;
    border-color:var(--verde);
}

.fotos-fila{
    display:flex;
    gap:8px;
    margin-top:10px;
}
.fotos-fila > *{ flex:1; min-width:0; }

.foto-miniatura{
    width:100%;
    height:64px;
    object-fit:cover;
    border-radius:var(--radio-sm);
    border:1px solid var(--linea);
    margin-top:6px;
}

/* ---------- Stepper de estado (elemento característico) ---------- */
.stepper{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin:4px 0 2px;
}

.step{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    text-align:center;
}

.step .punto{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--linea);
    border:2px solid var(--linea);
    margin-bottom:6px;
    z-index:1;
}

.step::before{
    content:"";
    position:absolute;
    top:9px;
    left:-50%;
    width:100%;
    height:2px;
    background:var(--linea);
    z-index:0;
}
.step:first-child::before{ display:none; }

.step.completado .punto{ background:var(--verde); border-color:var(--verde); }
.step.completado::before{ background:var(--verde); }
.step.actual .punto{ background:var(--azul-600); border-color:var(--azul-600); box-shadow:0 0 0 4px var(--azul-100); }

.step .etiqueta{
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--gris-texto);
    line-height:1.2;
}
.step.actual .etiqueta{ color:var(--azul-900); }
.step.completado .etiqueta{ color:var(--verde); }

/* ---------- Mensajes de estado / error ---------- */
.mensaje-estado{
    text-align:center;
    font-size:13px;
    font-weight:700;
    padding:10px;
    border-radius:var(--radio-sm);
    margin-top:10px;
}
.mensaje-estado:empty{ display:none; padding:0; margin:0; }

/* Las etiquetas ASP.NET (Label13 avisos, Label15 info) heredan este estilo por JS/CSS de atributo */
span.aviso{
    display:block;
    color:var(--rojo);
    background:var(--rojo-bg);
    text-align:center;
    font-size:13px;
    font-weight:700;
    padding:10px;
    border-radius:var(--radio-sm);
    margin-top:8px;
}
span.aviso:empty{ display:none; }

/* ---------- Login ---------- */
.login-shell{
    max-width:360px;
    margin:40px auto 0;
}

.login-card{
    background:var(--blanco);
    border-radius:var(--radio);
    box-shadow:var(--sombra);
    padding:28px 22px;
    text-align:center;
}

.login-card img{
    height:70px;
    margin-bottom:8px;
}

.login-card h1{
    font-size:17px;
    font-weight:800;
    color:var(--azul-900);
    margin:0 0 20px;
}

/* ---------- Lista de trabajos (tarjetas por fila) ---------- */
.lista-trabajos table{
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
}
.lista-trabajos thead{ display:none; }
.lista-trabajos tr{
    background:var(--azul-050);
    border-radius:var(--radio-sm);
}
.lista-trabajos td{
    padding:12px 10px;
    font-size:13px;
    font-weight:700;
    color:var(--azul-900);
    border:none;
}
.lista-trabajos td:first-child{ border-top-left-radius:var(--radio-sm); border-bottom-left-radius:var(--radio-sm); font-weight:800; }
.lista-trabajos td:last-child{ border-top-right-radius:var(--radio-sm); border-bottom-right-radius:var(--radio-sm); }
.lista-trabajos a{
    color:var(--azul-600) !important;
    font-weight:800 !important;
    text-decoration:none !important;
}

/* Oculta los controles auxiliares de captura de foto */
.oculto{ display:none !important; }