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

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

:root {
    --verde-oscuro: #1F4B3F;
    --verde: #3E8E6B;
    --verde-claro: #E8F5EE;
    --verde-claro2: #D3EDE0;
    --texto: #1C2624;
    --texto-suave: #667B74;
    --papel: #FFFFFF;
    --fondo: #F6FAF8;
    --borde: #DCE8E2;
    --oxido: #C0392B;
    --oxido-claro: #FBEAE8;
    --ambar: #B98900;
    --ambar-claro: #FBF3DA;
    /* Tono de la empresa: el color del menú y sus versiones para líneas, botones
       secundarios e iconos. header.php inyecta --color-menu-* si la empresa tiene
       color propio (con contraste legible garantizado, ver ColorTono.php); si no,
       valen los verdes de siempre. El rojo (eliminar/cancelar) y los avisos no usan
       estos tonos: son semánticos. */
    --tono: var(--color-menu, var(--verde-oscuro));
    --tono-acento: var(--color-menu-acento, var(--verde-oscuro));
    --tono-claro: var(--color-menu-claro, var(--verde-claro));
    --tono-claro2: var(--color-menu-claro2, var(--verde-claro2));
    --tono-texto: var(--color-menu-texto, var(--verde-oscuro));
    /* Altura común de botones, botones de icono y campos: todo mide lo mismo. */
    --alto-control: 38px;
    --sidebar-ancho: 240px;
    --sidebar-ancho-plegado: 64px;
}

* { box-sizing: border-box; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Todos los botones miden lo mismo, sean <button>, <a> o <summary> (cada etiqueta calcula
   la altura de línea a su manera, por eso se fijan altura, interlineado y borde): todos
   llevan borde de 1 px (transparente o de color), así ninguno mide 2 px más que otro. */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    box-sizing: border-box; min-height: var(--alto-control); padding: 0 16px;
    border: 1px solid transparent; border-radius: 6px;
    font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    white-space: nowrap; vertical-align: middle; cursor: pointer; text-decoration: none;
    transition: filter .12s ease;
}
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ""; }
.btn:hover { filter: brightness(0.95); }
.btn--primario { background: var(--color-menu, var(--verde-oscuro)); border-color: var(--color-menu, var(--verde-oscuro)); color: var(--color-texto-menu, #FFFFFF); }
/* Los botones principales llevan el color del menú (y el color de letra del menú: es el que
   cada empresa ha elegido para que se lea bien sobre ese fondo). Al pasar el ratón se aclaran
   con la opacidad, que se nota con cualquier color. Los botones secundarios y los de icono
   siguen siendo claros y neutros a propósito: llevan el color como TEXTO sobre fondo blanco,
   y con un color de menú claro no se leerían. */
.btn--primario:hover { filter: none; opacity: .88; }
.btn--secundario { background: var(--tono-claro); border: 1px solid var(--tono-claro2); color: var(--tono-texto); }
.btn--peligro { background: var(--oxido-claro); border: 1px solid #f0c4bf; color: var(--oxido); }

/* Botones de icono (para acciones en filas de tabla, amigables en móvil) */
.btn-icono {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: var(--alto-control); height: var(--alto-control); border-radius: 6px; border: 1px solid var(--borde);
    background: #fff; color: var(--tono-texto); cursor: pointer; text-decoration: none;
}
.btn-icono:hover { background: var(--tono-claro); }
.btn-icono--enviado { background: var(--tono-claro); border-color: var(--tono-acento); color: var(--tono-texto); }
.btn-icono--enviado:hover { background: var(--tono); color: var(--color-texto-menu, #FFFFFF); }
.btn-icono.peligro { color: var(--oxido); }
.btn-icono svg { width: 18px; height: 18px; }
.grupo-iconos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; position: relative; }
.grupo-iconos > form, .acciones-fila > form { display: flex; margin: 0; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.enviar-popover { position: relative; }
.enviar-popover summary {
    list-style: none; cursor: pointer;
}
.enviar-popover summary::-webkit-details-marker { display: none; }
.enviar-popover summary::marker { content: ""; }
.enviar-popover[open] summary { background: var(--tono-claro); border-color: var(--tono-acento); }
.enviar-popover__form {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
    background: #fff; border: 1px solid var(--borde); border-radius: 8px;
    padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14);
    display: flex; gap: 6px; align-items: center; flex-wrap: nowrap;
    width: max-content; max-width: calc(100vw - 32px);
}
/* En las tablas de escritorio los desplegables están en la última columna (Acciones): se abren
   hacia la izquierda para no salirse de la pantalla. En móvil las acciones van a la izquierda
   de cada tarjeta, así que allí se siguen abriendo hacia la derecha. */
@media (min-width: 881px) { td .enviar-popover__form { left: auto; right: 0; } }
.enviar-popover__form input[type=email], .enviar-popover__form input[type=password] {
    box-sizing: border-box; height: var(--alto-control); padding: 0 10px; border: 1px solid var(--borde); border-radius: 6px;
    font-size: 13.5px; font-family: inherit; width: 240px; flex: 1 1 auto; min-width: 0;
}
/* En móvil, si no cabe, el botón baja debajo del campo (sin salirse de la pantalla). */
@media (max-width: 600px) { .enviar-popover__form { flex-wrap: wrap; } .enviar-popover__form input[type=email], .enviar-popover__form input[type=password] { width: 100%; } }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== Fila de botones de un formulario ===== */
/* Las acciones van a la izquierda y el botón de cancelar/volver SIEMPRE a la derecha:
   con dos botones, uno a cada lado; con tres, dos a la izquierda y uno a la derecha.
   Si la pantalla es estrecha y se parte en dos líneas, el de cancelar sigue a la derecha. */
.acciones-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.acciones-form__derecha { margin-left: auto; }

/* Matrículas: se ven en mayúsculas mientras se escriben (el valor se limpia al salir del campo). */
input[data-matricula] { text-transform: uppercase; }