﻿/* =========================================================================
   Datos mínimos - estilos de la carpeta pública
   Independiente del resto del sitio (no usa bootstrap ni main.css).
   ========================================================================= */
:root {
    --dm-azul: #1b5e8c;
    --dm-azul-oscuro: #134766;
    --dm-azul-claro: #eef3f8;
    --dm-borde: #c9d5e1;
    --dm-texto: #1f2a36;
    --dm-texto-suave: #5b6b7b;
    --dm-fondo: #f6f8fa;
    --dm-blanco: #ffffff;
    --dm-error: #b3261e;
    --dm-error-fondo: #fdecea;
    --dm-exito: #1e7b3a;
    --dm-exito-fondo: #e8f5ec;
    --dm-radio: 8px;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    color: var(--dm-texto);
    background: var(--dm-fondo);
    line-height: 1.45;
}
a { color: var(--dm-azul); }
a:hover { color: var(--dm-azul-oscuro); }
[hidden] { display: none !important; }

/* ---- Estructura ---- */
.dm-encabezado {
    background: var(--dm-blanco);
    border-bottom: 3px solid var(--dm-azul);
}
.dm-encabezado-interno, .dm-principal, .dm-pie-interno {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 16px;
}
.dm-encabezado-interno {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 72px;
}
.dm-encabezado img { height: 44px; width: auto; display: block; }
.dm-encabezado-titulo { font-weight: 600; color: var(--dm-azul); text-align: right; }
.dm-principal { padding-top: 24px; padding-bottom: 48px; }
.dm-pie { background: var(--dm-blanco); border-top: 1px solid var(--dm-borde); color: var(--dm-texto-suave); font-size: .85rem; }
.dm-pie-interno { padding-top: 16px; padding-bottom: 16px; }

h1 { font-size: 1.6rem; margin: 0 0 6px; color: var(--dm-azul-oscuro); }
h2 { font-size: 1.2rem; margin: 0 0 12px; color: var(--dm-azul-oscuro); }
.dm-intro { color: var(--dm-texto-suave); margin: 0 0 20px; max-width: 760px; }

.dm-pasos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
.dm-pasos li {
    padding: 6px 12px; border-radius: 999px; background: var(--dm-blanco);
    border: 1px solid var(--dm-borde); font-size: .9rem; color: var(--dm-texto-suave);
}
.dm-pasos li.dm-actual { background: var(--dm-azul); border-color: var(--dm-azul); color: var(--dm-blanco); font-weight: 600; }

.dm-tarjeta {
    background: var(--dm-blanco); border: 1px solid var(--dm-borde);
    border-radius: var(--dm-radio); padding: 20px; margin-bottom: 20px;
}

/* ---- Selector de formatos ---- */
.dm-familia { margin-bottom: 28px; }
.dm-familia > p { color: var(--dm-texto-suave); margin: -6px 0 12px; }
.dm-formatos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dm-formato {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: var(--dm-blanco); border: 1px solid var(--dm-borde); border-radius: var(--dm-radio);
    overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.dm-formato:hover, .dm-formato:focus-visible { border-color: var(--dm-azul); box-shadow: 0 4px 14px rgba(27, 94, 140, .15); }
.dm-formato img { width: 100%; height: 160px; object-fit: contain; background: #fff; padding: 8px; }
.dm-formato-cuerpo { padding: 14px 16px; border-left: 4px solid var(--dm-azul); flex: 1; }
.dm-formato-cuerpo strong { display: block; color: var(--dm-azul-oscuro); margin-bottom: 4px; }
.dm-formato-cuerpo span { font-size: .88rem; color: var(--dm-texto-suave); }

/* ---- Buscador de formatos ---- */
.dm-buscador {
    background: var(--dm-blanco); border: 1px solid var(--dm-borde); border-radius: var(--dm-radio);
    padding: 14px 16px 10px; margin-bottom: 24px;
}
.dm-buscador .dm-entrada { font-size: 1.05rem; padding: 10px 12px; }
.dm-buscador-estado { margin: 6px 0 0; min-height: 1.2em; font-size: .88rem; color: var(--dm-texto-suave); }

/* ---- Avisos ---- */
.dm-aviso { border-radius: var(--dm-radio); padding: 12px 16px; margin-bottom: 20px; border: 1px solid var(--dm-borde); background: var(--dm-azul-claro); }
.dm-aviso-exito { background: var(--dm-exito-fondo); border-color: #b9dfc5; color: var(--dm-exito); }
.dm-aviso-error { background: var(--dm-error-fondo); border-color: #f2c1bd; color: var(--dm-error); }
.dm-errores {
    background: var(--dm-error-fondo); border: 1px solid #f2c1bd; border-left: 4px solid var(--dm-error);
    border-radius: var(--dm-radio); padding: 12px 16px; margin-bottom: 20px;
}
.dm-errores:focus { outline: 2px solid var(--dm-error); outline-offset: 2px; }
.dm-errores h2 { color: var(--dm-error); font-size: 1rem; margin-bottom: 6px; }
.dm-errores ul { margin: 0; padding-left: 20px; }
.dm-errores a { color: var(--dm-error); }

/* ---- Formulario ---- */
.dm-seccion {
    border: 1px solid var(--dm-borde); border-radius: var(--dm-radio);
    background: var(--dm-blanco); margin: 0 0 20px; padding: 0 20px 8px;
}
.dm-seccion > legend {
    float: left; width: calc(100% + 40px); margin: 0 -20px 16px;
    padding: 12px 20px; background: var(--dm-azul-claro); border-left: 4px solid var(--dm-azul);
    border-radius: var(--dm-radio) var(--dm-radio) 0 0; font-weight: 600; color: var(--dm-azul-oscuro);
}
.dm-seccion > legend + * { clear: both; }
.dm-descripcion { color: var(--dm-texto-suave); margin: 0 0 12px; }
.dm-fila { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px 16px; clear: both; }
.dm-campo { margin-bottom: 14px; min-width: 0; }
.dm-ancho-1 { grid-column: span 1; } .dm-ancho-2 { grid-column: span 2; } .dm-ancho-3 { grid-column: span 3; }
.dm-ancho-4 { grid-column: span 4; } .dm-ancho-5 { grid-column: span 5; } .dm-ancho-6 { grid-column: span 6; }
.dm-ancho-7 { grid-column: span 7; } .dm-ancho-8 { grid-column: span 8; } .dm-ancho-9 { grid-column: span 9; }
.dm-ancho-10 { grid-column: span 10; } .dm-ancho-11 { grid-column: span 11; } .dm-ancho-12 { grid-column: span 12; }

.dm-etiqueta { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.dm-subetiqueta { display: block; font-size: .8rem; color: var(--dm-texto-suave); margin-bottom: 2px; }
.dm-obligatorio {
    display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px;
    background: var(--dm-azul-claro); color: var(--dm-azul); font-size: .72rem; font-weight: 600; vertical-align: 1px;
}
.dm-entrada {
    width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; color: inherit;
    border: 1px solid var(--dm-borde); border-radius: 6px; background: var(--dm-blanco);
}
textarea.dm-entrada { min-height: 80px; resize: vertical; }
.dm-entrada:focus { outline: 2px solid rgba(27, 94, 140, .35); outline-offset: 1px; border-color: var(--dm-azul); }
.dm-entrada:disabled { background: #f0f2f4; color: var(--dm-texto-suave); }
.dm-grupo { display: flex; gap: 8px; align-items: center; }
.dm-grupo > .dm-entrada:first-child { flex: 1 1 60%; }
.dm-grupo > select.dm-entrada { flex: 1 1 40%; }
.dm-unidad-fija { color: var(--dm-texto-suave); white-space: nowrap; }
.dm-rango { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dm-parte { min-width: 0; }
.dm-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.dm-opcion { display: flex; gap: 8px; align-items: flex-start; }
.dm-opcion input { margin-top: 4px; width: 16px; height: 16px; flex: none; }
.dm-ayuda { font-size: .82rem; color: var(--dm-texto-suave); margin: 4px 0 0; }
.dm-invalido, .dm-opciones.dm-invalido { border-color: var(--dm-error) !important; background: #fffafa; }
.dm-error { display: block; color: var(--dm-error); font-size: .82rem; margin-top: 4px; }
.dm-check { display: flex; gap: 10px; align-items: flex-start; }
.dm-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }

/* ---- Botones ---- */
.dm-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.dm-boton {
    display: inline-flex; align-items: center; justify-content: center; min-height: 42px;
    padding: 8px 20px; border-radius: 6px; border: 1px solid var(--dm-azul);
    background: var(--dm-azul); color: var(--dm-blanco); font: inherit; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
.dm-boton:hover { background: var(--dm-azul-oscuro); color: var(--dm-blanco); }
.dm-boton-secundario { background: var(--dm-blanco); color: var(--dm-azul); }
.dm-boton-secundario:hover { background: var(--dm-azul-claro); color: var(--dm-azul-oscuro); }
.dm-boton-peligro { background: var(--dm-blanco); color: var(--dm-error); border-color: #e3b2ae; min-height: 34px; padding: 4px 12px; font-size: .88rem; }
.dm-boton-peligro:hover { background: var(--dm-error-fondo); color: var(--dm-error); }

/* ---- Resumen de solicitud ---- */
.dm-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin: 0; }
.dm-datos dt { font-size: .8rem; color: var(--dm-texto-suave); }
.dm-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.dm-equipo { border: 1px solid var(--dm-borde); border-radius: var(--dm-radio); margin-bottom: 12px; background: var(--dm-blanco); }
.dm-equipo summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.dm-equipo summary strong { color: var(--dm-azul-oscuro); }
.dm-equipo-detalle { padding: 0 16px 12px; }
.dm-equipo table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.dm-equipo th, .dm-equipo td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--dm-azul-claro); vertical-align: top; }
.dm-equipo th { width: 40%; color: var(--dm-texto-suave); font-weight: 600; }
.dm-equipo .dm-subtitulo td { background: var(--dm-azul-claro); font-weight: 600; color: var(--dm-azul-oscuro); }
.dm-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 760px) {
    .dm-fila { grid-template-columns: 1fr; }
    .dm-fila > .dm-campo { grid-column: 1 / -1; }
    .dm-rango { grid-template-columns: 1fr 1fr; }
    .dm-seccion { padding: 0 14px 6px; }
    .dm-seccion > legend { width: calc(100% + 28px); margin: 0 -14px 14px; padding: 10px 14px; }
    h1 { font-size: 1.35rem; }
    .dm-encabezado-titulo { font-size: .9rem; }
}
