/* =====================================================
   NORMATIVIDAD - CORPAMAG (Resoluciones, Acuerdos, Autos de inicio, Gaceta)
   Diseño de Resoluciones entregado por la Oficina, compartido por las páginas
   de Normatividad. Emojis reemplazados por íconos SVG (iconos/res-*.svg)
   ===================================================== */

/* ---------- Colores institucionales ---------- */
:root{
--azul:#005A9C;--azul-oscuro:#003B6B;--celeste:#00AEEF;
--verde:#2E7D32;--verde-claro:#8BC34A;
--fondo:#F5F9FC;--blanco:#FFFFFF;
--texto:#123B5D;--texto-suave:#60788A;
--borde:#DCE7EF;--azul-suave:#EAF5FB;--verde-suave:#EEF8F1;
--sombra:0 8px 28px rgba(0,60,100,.09);
--sombra-hover:0 12px 32px rgba(0,60,100,.14);
--radio:18px;
}

/* ---------- Reset / body ---------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Arial,sans-serif;background:var(--fondo);color:var(--texto);line-height:1.5}
.contenedor{width:min(1180px,calc(100% - 40px));margin:auto;padding:25px 0 60px}

/* ---------- Barra superior ---------- */
.barra-superior{display:flex;align-items:center;justify-content:space-between;padding:15px 0;margin-bottom:25px}
.marca{display:flex;align-items:center;gap:12px}
.marca-icono{width:64px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--azul);padding:3px 5px;border:1px solid var(--borde);
font-weight:800;font-size:13px;box-shadow:0 5px 12px rgba(0,90,156,.20);overflow:hidden}
.marca-icono img{width:100%;height:100%;object-fit:contain}
.marca-texto strong{display:block;color:var(--azul-oscuro);font-size:16px}
.marca-texto span{display:block;color:var(--texto-suave);font-size:11px}
.seccion{display:flex;align-items:center;gap:8px;color:var(--azul);font-size:13px;font-weight:700;text-transform:uppercase}
.seccion::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verde)}

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:25px;font-size:13px;color:var(--texto-suave)}
.breadcrumb a{color:var(--azul);text-decoration:none;font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.separador{color:#91A5B3}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--azul-oscuro),var(--azul));color:#fff;border-radius:22px;
padding:45px 48px;margin-bottom:25px;box-shadow:var(--sombra)}
.hero::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-100px;top:-120px;border:35px solid rgba(255,255,255,.07)}
.hero::before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:80px;bottom:-120px;border:28px solid rgba(139,195,74,.15)}
.hero-contenido{position:relative;z-index:2;max-width:800px}
.hero-etiqueta{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.10);
border-radius:30px;font-size:12px;font-weight:700;margin-bottom:17px}
.hero-etiqueta span{width:7px;height:7px;border-radius:50%;background:var(--verde-claro)}
.hero h1{font-size:clamp(32px,5vw,48px);line-height:1.05;margin-bottom:15px;letter-spacing:-.8px}
.hero p{max-width:720px;color:rgba(255,255,255,.86);font-size:16px}

/* ---------- Buscador ---------- */
.buscador{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:25px;box-shadow:var(--sombra);margin-bottom:20px}
.buscador-titulo{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:15px}
.buscador-titulo h2{font-size:19px;color:var(--azul-oscuro)}
.buscador-titulo span{font-size:12px;color:var(--texto-suave)}
.busqueda-principal{display:flex;align-items:center;gap:10px;height:54px;border:1px solid #CBD9E2;border-radius:12px;padding:0 10px 0 17px;transition:.2s}
.busqueda-principal:focus-within{border-color:var(--azul);box-shadow:0 0 0 4px rgba(0,90,156,.09)}
.busqueda-icono{width:20px;height:20px;flex:none}
.busqueda-principal input{flex:1;min-width:0;height:100%;border:0;outline:0;font-size:15px;color:var(--texto);background:transparent;font-family:inherit}
.busqueda-principal input::placeholder{color:#91A1AC}
.btn-buscar{height:40px;padding:0 18px;border:0;border-radius:9px;background:var(--azul);color:#fff;font-weight:700;font-family:inherit;cursor:pointer;transition:.2s}
.btn-buscar:hover{background:var(--azul-oscuro);transform:translateY(-1px)}

/* ---------- Filtros ---------- */
.filtros{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-top:18px;padding-top:18px;border-top:1px solid var(--borde)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{color:var(--texto);font-size:12px;font-weight:700}
.campo input,.campo select{width:100%;height:44px;padding:0 12px;border:1px solid #CBD9E2;border-radius:9px;outline:none;background:#fff;color:var(--texto);font-size:14px;font-family:inherit}
.campo input:focus,.campo select:focus{border-color:var(--azul);box-shadow:0 0 0 3px rgba(0,90,156,.09)}
.filtros-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:17px}
.btn-limpiar{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;border:1px solid var(--borde);border-radius:9px;
background:#fff;color:var(--texto);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.btn-limpiar:hover{background:#F3F7FA}
.filtros-acciones .btn-buscar{height:42px}

/* ---------- Resumen ---------- */
.resumen{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:25px 0 15px}
.resumen h2{color:var(--azul-oscuro);font-size:22px}
.resumen p{color:var(--texto-suave);font-size:13px;margin-top:2px}
.contador{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;background:var(--verde-suave);color:var(--verde);border:1px solid #D0E7D4;
border-radius:30px;font-size:13px;font-weight:700;white-space:nowrap}
.contador::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde)}

/* ---------- Bloque por año ---------- */
.anio-bloque{margin-bottom:18px}
.anio-cabecera{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.anio-linea{flex:1;height:1px;background:var(--borde)}
.anio-cabecera h3{color:var(--azul-oscuro);font-size:15px;white-space:nowrap}
.anio-cabecera span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:25px;padding:0 8px;border-radius:7px;
background:var(--azul);color:#fff;font-size:11px;font-weight:700}

/* ---------- Tarjeta de resolución ---------- */
.resolucion{position:relative;display:grid;grid-template-columns:58px 1fr auto;gap:18px;align-items:center;background:var(--blanco);
border:1px solid var(--borde);border-radius:15px;padding:20px;margin-bottom:12px;box-shadow:0 4px 15px rgba(0,60,100,.045);transition:.22s}
.resolucion:hover{transform:translateY(-2px);border-color:#BFD6E4;box-shadow:var(--sombra-hover)}
.resolucion::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:0 5px 5px 0;background:var(--verde)}

/* Ícono documento (dibujado con CSS, igual que el diseño) */
.documento{width:52px;height:62px;position:relative;border:1px solid #C7D9E5;border-radius:7px;background:linear-gradient(to bottom,#fff,#F2F7FA);
box-shadow:0 3px 7px rgba(0,60,100,.08)}
.documento::before{content:"";position:absolute;right:-1px;top:-1px;width:16px;height:16px;background:var(--fondo);clip-path:polygon(0 0,100% 100%,100% 0)}
.documento::after{content:"PDF";position:absolute;left:6px;right:6px;bottom:7px;padding:2px 0;text-align:center;border-radius:3px;background:var(--azul);color:#fff;font-size:8px;font-weight:800}
.documento.sin-archivo::after{content:"—";background:#A9B8C3}

.resolucion-info{min-width:0}
.resolucion-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.resolucion-numero{color:var(--azul);font-size:16px;font-weight:800;text-decoration:none}
a.resolucion-numero:hover{color:var(--azul-oscuro);text-decoration:underline}
.fecha{padding:4px 8px;border-radius:6px;background:var(--azul-suave);color:var(--azul);font-size:10px;font-weight:700;text-transform:uppercase}
.descripcion{color:var(--texto);font-size:13px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.metadatos{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:9px}
.metadato{display:inline-flex;align-items:center;gap:5px;color:var(--texto-suave);font-size:11px}
.metadato strong{color:var(--texto)}

/* ---------- Botón ver resolución ---------- */
.btn-documento{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:145px;height:42px;padding:0 15px;border:1px solid var(--azul);
border-radius:9px;background:#fff;color:var(--azul);font-size:12px;font-weight:700;text-decoration:none;transition:.2s}
.btn-documento:hover{background:var(--azul);color:#fff;transform:translateY(-1px)}
.btn-documento.deshabilitado{border-color:var(--borde);color:#91A1AC;cursor:default}
.btn-documento.deshabilitado:hover{background:#fff;color:#91A1AC;transform:none}

/* Íconos que toman el color del texto (máscara SVG) */
.ico{display:inline-block;width:15px;height:15px;flex:none;background-color:currentColor;
-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-documento{--ico:url(../iconos/res-documento.svg)}
.ico-flecha{--ico:url(../iconos/res-flecha.svg)}

/* ---------- Paginación ---------- */
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 0;margin-top:10px}
.paginacion-info{color:var(--texto-suave);font-size:12px}
.paginas{display:flex;flex-wrap:wrap;gap:5px}
.pagina{min-width:34px;height:34px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--borde);border-radius:8px;
background:#fff;color:var(--texto);font-weight:600;font-size:14px;text-decoration:none}
a.pagina:hover,.pagina.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.pagina.puntos{border-color:transparent;background:transparent}
.pagina.inactiva{color:#B5C3CD}

/* ---------- Sin resultados ---------- */
.sin-resultados{text-align:center;padding:50px 20px;background:#fff;border:1px solid var(--borde);border-radius:15px;color:var(--texto-suave)}
.sin-resultados .icono{width:44px;height:44px;margin:0 auto 10px;display:block}
.sin-resultados h3{color:var(--azul-oscuro);margin-bottom:5px}

/* ---------- Footer ---------- */
.footer{text-align:center;padding-top:20px;color:#7A8B96;font-size:11px}

/* ---------- Responsive ---------- */
@media(max-width:850px){
  .filtros{grid-template-columns:1fr 1fr}
  .resolucion{grid-template-columns:55px 1fr}
  .btn-documento{grid-column:2;justify-self:start}
}
@media(max-width:600px){
  .contenedor{width:calc(100% - 24px);padding-top:15px}
  .barra-superior{align-items:flex-start}
  .seccion{display:none}
  .hero{padding:32px 25px}
  .hero h1{font-size:31px}
  .buscador{padding:20px}
  .busqueda-principal{height:auto;min-height:52px;padding:6px 8px 6px 13px}
  .btn-buscar{padding:0 12px}
  .filtros{grid-template-columns:1fr}
  .filtros-acciones{flex-direction:column}
  .btn-limpiar,.filtros-acciones .btn-buscar{width:100%}
  .resumen{align-items:flex-start;flex-direction:column}
  .resolucion{grid-template-columns:48px 1fr;padding:17px}
  .documento{width:44px;height:54px}
  .btn-documento{grid-column:2;width:100%}
  .paginacion{flex-direction:column}
}

/* =====================================================
   COMPLEMENTOS PARA ACUERDOS, AUTOS Y GACETA
   ===================================================== */

/* Filtros de 4 columnas (Autos, Acuerdos) */
.filtros.cuatro{grid-template-columns:repeat(4,1fr)}
.filtros.dos{grid-template-columns:1fr 1fr}
.filtros.sin-borde{margin-top:0;padding-top:0;border-top:0}

/* Etiqueta del tipo de documento dentro de la tarjeta */
.tipo-doc{padding:4px 8px;border-radius:6px;background:var(--verde-suave);color:var(--verde);font-size:10px;font-weight:700;text-transform:uppercase}

/* Última actualización dentro del hero */
.hero-actualizacion{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;color:rgba(255,255,255,.8)}
.hero-actualizacion strong{color:#fff}
.hero-actualizacion::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde-claro)}

/* Documento con enlace externo */
.documento.externo::after{content:"WEB";background:var(--verde)}

/* Gaceta: un bloque desplegable por mes */
.mes{background:#fff;border:1px solid var(--borde);border-radius:15px;margin-bottom:12px;box-shadow:0 4px 15px rgba(0,60,100,.045);overflow:hidden}
.mes>summary{display:flex;align-items:center;gap:12px;padding:16px 20px;cursor:pointer;list-style:none;font-weight:700;color:var(--azul-oscuro)}
.mes>summary::-webkit-details-marker{display:none}
.mes>summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--azul);border-bottom:2px solid var(--azul);transform:rotate(45deg);transition:.2s}
.mes[open]>summary::after{transform:rotate(-135deg)}
.mes>summary:hover{background:#F8FBFD}
.mes-nombre{font-size:15px}
.mes-cantidad{padding:3px 9px;border-radius:20px;background:var(--azul-suave);color:var(--azul);font-size:11px;font-weight:700}
.mes-contenido{padding:4px 16px 8px;border-top:1px solid var(--borde);background:var(--fondo)}
.mes-contenido .resolucion{margin:12px 0}

@media(max-width:850px){
  .filtros.cuatro{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .filtros.cuatro,.filtros.dos{grid-template-columns:1fr}
}