:root {
  /* Marca RR Talleres (11_marca/identidad.md): rojo RR, negro RR y grafito */
  --marca: #D3121A; --marca-oscuro: #A90E15; --enlace: #B3101A; --negro-rr: #0B0B0C; --grafito: #232529;
  --gris-900: #111827; --gris-700: #374151;
  --gris-500: #6b7280; --gris-300: #d1d5db; --gris-100: #f3f4f6; --gris-50: #f9fafb;
  --verde: #059669; --ambar: #d97706; --rojo: #dc2626; --blanco: #fff;
  --radio: 8px; --sombra: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--gris-100);
       color: var(--gris-900); font-size: 15px; line-height: 1.5; }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }

.layout { display: flex; min-height: 100vh; }
.sidebar { width: 240px; background: var(--negro-rr); color: var(--blanco); flex-shrink: 0;
           display: flex; flex-direction: column; }
.sidebar .marca { padding: 1.25rem 1.5rem; font-weight: 700; font-size: 1.05rem;
                  border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar .marca small { display: block; font-weight: 400; font-size: .75rem; color: var(--gris-500); }
.sidebar nav { padding: .75rem 0; flex: 1; }
.sidebar a.item { display: block; padding: .6rem 1.5rem; color: var(--gris-300); font-size: .92rem; }
.sidebar a.item:hover { background: rgba(255,255,255,.06); color: var(--blanco); text-decoration: none; }
.sidebar a.item.activo { background: var(--marca); color: var(--blanco); }
.sidebar .marca img { display: block; width: 100%; max-width: 190px; height: auto; margin-bottom: .35rem; }
.sidebar .pie { padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem;
                color: var(--gris-500); }

.principal { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--gris-300);
            padding: .9rem 1.75rem; display: flex; justify-content: space-between; align-items: center; }
.cabecera h1 { font-size: 1.15rem; }
.contenido { padding: 1.75rem; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.tarjeta { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.1rem 1.25rem; }
.tarjeta .etiqueta { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris-500); }
.tarjeta .cifra { font-size: 1.85rem; font-weight: 700; margin-top: .25rem; }
.tarjeta .pie { font-size: .8rem; color: var(--gris-500); margin-top: .2rem; }

.panel { background: var(--blanco); border-radius: var(--radio); box-shadow: var(--sombra);
         margin-top: 1.5rem; overflow: hidden; }
.panel > h2 { font-size: .95rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--gris-300); }
.panel .cuerpo { padding: 1.25rem; }

table { width: 100%; border-collapse: collapse; }
th, td { padding: .6rem 1.25rem; text-align: left; border-bottom: 1px solid var(--gris-300); font-size: .9rem; }
th { background: var(--gris-50); font-size: .78rem; text-transform: uppercase; color: var(--gris-500); }
tbody tr:last-child td { border-bottom: none; }

.etiq { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.etiq.ok { background: #d1fae5; color: #065f46; }
.etiq.aviso { background: #fef3c7; color: #92400e; }
.etiq.error { background: #fee2e2; color: #991b1b; }
.etiq.info { background: #e8eaed; color: var(--grafito); }

.boton { display: inline-block; background: var(--marca); color: var(--blanco); border: none;
         padding: .55rem 1.1rem; border-radius: var(--radio); font-size: .9rem; cursor: pointer; }
.boton:hover { background: var(--marca-oscuro); text-decoration: none; }
.boton.secundario { background: var(--gris-100); color: var(--gris-700); }

.aviso { padding: .85rem 1.1rem; border-radius: var(--radio); margin-bottom: 1rem; font-size: .9rem; }
.aviso.error { background: #fee2e2; color: #991b1b; }
.aviso.ok { background: #d1fae5; color: #065f46; }
.aviso.info { background: #eef0f2; color: var(--grafito); }

/* Login */
.login-fondo { display: flex; align-items: center; justify-content: center; min-height: 100vh;
               background: linear-gradient(160deg, var(--grafito), var(--negro-rr) 70%); }
.login-caja { background: var(--blanco); padding: 2.25rem; border-radius: 12px; width: 100%;
              max-width: 380px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.25); }
.login-caja h1 { font-size: 1.3rem; margin-bottom: .25rem; }
.login-caja .logo { display: block; width: 100%; max-width: 280px; height: auto; margin: 0 auto 1rem; }
.login-caja { border-top: 5px solid var(--marca); }
.login-caja p.sub { color: var(--gris-500); font-size: .88rem; margin-bottom: 1.5rem; }
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; }
input[type=text], input[type=password], input[type=search], select {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--gris-300); border-radius: var(--radio);
  font-size: .95rem; margin-bottom: 1rem; font-family: inherit; }
input:focus, select:focus { outline: 2px solid var(--marca); outline-offset: -1px; }
.login-caja .boton { width: 100%; padding: .7rem; }

@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .sidebar nav { display: flex; flex-wrap: wrap; }
  .contenido { padding: 1rem; }
}

/* Botón que se comporta como enlace dentro de las tablas de acciones */
button.enlace { background: none; border: none; padding: 0; font: inherit; color: var(--enlace);
                cursor: pointer; text-decoration: none; }
button.enlace:hover { text-decoration: underline; }
button.enlace:focus-visible, a:focus-visible, .boton:focus-visible {
  outline: 3px solid var(--marca); outline-offset: 2px; }

/* Salto al contenido: visible sólo al recibir el foco (WCAG 2.4.1) */
.saltar { position: absolute; left: -9999px; top: 0; background: var(--blanco); color: var(--enlace);
          padding: .6rem 1rem; z-index: 100; border-radius: 0 0 var(--radio) 0; }
.saltar:focus { left: 0; }

code { background: var(--gris-100); padding: .15rem .4rem; border-radius: 4px; }

/* ---------- Formularios en rejilla ---------- */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1rem; }
.campo { display: flex; flex-direction: column; }
.campo label { margin-bottom: .3rem; }
.campo input, .campo select, .campo textarea { margin-bottom: .9rem; }
.campo textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--gris-300);
                  border-radius: var(--radio); font: inherit; font-size: .95rem; resize: vertical; }
.campo.casilla label { font-weight: 400; display: flex; align-items: center; gap: .5rem; }
.campo.casilla input { width: auto; margin-bottom: .9rem; }
.ancho-total { grid-column: 1 / -1; }
.ancho-doble { grid-column: span 2; }
.ayuda { font-size: .8rem; color: var(--gris-500); margin: -.7rem 0 .9rem; }
.obligatorio { color: var(--rojo); }
fieldset { border: 1px solid var(--gris-300); border-radius: var(--radio); padding: 1rem 1.25rem .25rem;
           margin-bottom: 1.25rem; }
legend { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
         color: var(--gris-500); padding: 0 .4rem; }

/* ---------- Filtros de listado ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 0 .75rem; align-items: flex-end; padding: 1rem 1.25rem;
           border-bottom: 1px solid var(--gris-300); background: var(--gris-50); }
.filtros .campo { min-width: 150px; }
.filtros .campo input, .filtros .campo select { margin-bottom: 0; }
.filtros .acciones { display: flex; gap: .5rem; padding-bottom: 0; }

/* ---------- Tablas y paginación ---------- */
.tabla-scroll { overflow-x: auto; }
.paginacion { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
              padding: .75rem 1.25rem; font-size: .85rem; color: var(--gris-500);
              border-top: 1px solid var(--gris-300); }
.paginacion a { font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.etiq.neutro { background: var(--gris-100); color: var(--gris-700); }

/* ---------- Ficha de expediente ---------- */
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem 1.5rem; }
.ficha .dato { display: flex; flex-direction: column; gap: .15rem; }
.ficha .dato dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--gris-500); }
.ficha .dato dd { margin: 0; font-size: .95rem; }
.barra-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cabecera-exp { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem; }
.cabecera-exp h2 { font-size: 1.2rem; }
.importe-grande { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.positivo { color: var(--rojo); }
.negativo { color: var(--verde); }
.vacio { padding: 1.25rem; color: var(--gris-500); }

/* Texto solo para lectores de pantalla (WCAG 2.4.6) */
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
                      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Galería de fotografías ---------- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.foto { margin: 0; background: var(--gris-50); border: 1px solid var(--gris-300);
        border-radius: var(--radio); overflow: hidden; }
.foto img { display: block; width: 100%; height: 150px; object-fit: cover; background: var(--gris-100); }
.foto .doc { display: flex; align-items: center; justify-content: center; height: 150px;
             font-weight: 700; color: var(--rojo); background: var(--gris-100); text-decoration: none; }
.foto figcaption { padding: .5rem .6rem; font-size: .8rem; line-height: 1.35; }
.foto figcaption small { color: var(--gris-500); }
.foto form { margin-top: .3rem; }
input[type=file] { width: 100%; padding: .45rem; border: 1px dashed var(--gris-300);
                   border-radius: var(--radio); background: var(--gris-50); font-size: .88rem;
                   margin-bottom: .9rem; }

/* ---------- Documento imprimible: factura ---------- */
.factura-cabecera { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.factura-cabecera p { font-size: .88rem; line-height: 1.45; }
.factura-totales { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.factura-totales table { width: auto; min-width: 260px; }
.factura-totales td { border: none; padding: .25rem .5rem; font-size: .9rem; }
.factura-totales .total td { border-top: 2px solid var(--gris-900); font-size: 1.05rem; padding-top: .5rem; }
.factura-qr { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
              margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--gris-300); }
.qr-hueco { width: 110px; height: 110px; border: 2px dashed var(--gris-300); border-radius: var(--radio);
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            color: var(--gris-500); flex-shrink: 0; }
.qr-hueco span { font-weight: 700; }
.qr-hueco small { font-size: .7rem; }
.aviso-atencion { border-left: 4px solid var(--ambar); }

/* ---------- Membrete de los documentos impresos ---------- */
.membrete { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; flex-wrap: wrap;
            padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 3px solid var(--marca); }
.membrete-taller img { display: block; width: 230px; max-width: 100%; height: auto; margin-bottom: .5rem; }
.membrete-taller p { font-size: .82rem; line-height: 1.45; color: var(--gris-700); }
.membrete-doc { text-align: right; }
.membrete-doc h2 { font-size: 1.3rem; letter-spacing: .03em; }
.membrete-doc p { font-size: .9rem; }
.pie-documento { margin-top: 1.75rem; padding-top: .75rem; border-top: 1px solid var(--gris-300);
                 font-size: .72rem; line-height: 1.4; color: var(--gris-500); }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2.5rem; }
.firmas div { border-top: 1px solid var(--gris-700); padding-top: .35rem; font-size: .8rem; color: var(--gris-500); }
.casillas-doc { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; font-size: .88rem; }
.casillas-doc li::before { content: "☐ "; }
.hueco-escritura { min-height: 4.5rem; border: 1px solid var(--gris-300); border-radius: 4px; padding: .5rem;
                   font-size: .9rem; white-space: pre-line; }
.documento h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--marca);
                margin: 1.25rem 0 .5rem; }

@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  .membrete { border-bottom-color: var(--marca); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .cabecera, .filtros, .sin-imprimir, .paginacion { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .contenido { padding: 0; }
  .panel { box-shadow: none; border: none; margin: 0; }
  .documento .cuerpo { padding: 0; }
  a { color: inherit; text-decoration: none; }
}