/* ===========================================================
   A Media Madera · diseño común de las herramientas (apps)
   Se sirve desde https://amediamadera.com/am-apps/apps.css y se carga en TODAS las herramientas
   (optimizador de cortes, distribuidor de interiores y las que vengan). Réplica de la web WordPress:
   fondo #F7F8F9, cabecera con el logo a 203×70 y menú «Inicio · Contacto», pie con el aviso legal,
   titulares en Georgia, marrón «madera» para lo principal.
   Especificación completa: «Diseno comun de apps/DISENO-APPS.md».
   =========================================================== */
:root {
    --am-fondo: #F7F8F9; --am-texto: #222;
    --am-hueso: #F7F3EC; --am-crema: #EFE7DA; --am-borde: #DCD1C0; --am-tinta: #241F1B; --am-suave: #5A5049;
    --am-madera: #8A5A2B; --am-madera-osc: #6E4622; --am-oliva: #5C6B3E;
    --am-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --am-sans: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
[hidden] { display: none !important; }

/* Página: el mismo fondo y tipografía que la web */
body.am-app { background: var(--am-fondo) !important; color: var(--am-texto); font-family: var(--am-sans); padding-top: 0 !important; }
@media (min-width: 768px) { body.am-app { padding: 0 1.5rem 1.5rem !important; } }
body.am-app a { text-underline-offset: 2px; }

/* 1. Cabecera del sitio (réplica de la de WordPress) ----------------------------------------- */
.amh { background: var(--am-fondo); }
.amh-in { max-width: 1200px; margin: 0 auto; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.amh-logo { display: block; line-height: 0; flex: none; }
.amh-logo img { display: block; width: 203px; height: 70px; }
.amh-nav { display: flex; align-items: center; }
.amh-nav a { color: var(--am-texto); text-decoration: none; font-size: 15px; padding: 0 20px; line-height: 60px; }
.amh-nav a:hover, .amh-nav a:focus-visible { color: var(--am-madera-osc); }
@media (max-width: 767px) {
    .amh-in { padding: 10px 14px; }
    .amh-logo img { width: 140px; height: auto; }
    .amh-nav a { padding: 0 10px; line-height: 44px; font-size: 14px; }
    .amh-in { flex-wrap: wrap; }
    .amh-nav { flex: 1 1 100%; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
    .amh-nav::-webkit-scrollbar { display: none; }
    .amh-nav a { padding: 0 12px 0 0; line-height: 36px; }
}
@media (max-height: 480px) { .amh { display: none; } }

/* 2. Barra de la herramienta: nombre, lema y las demás herramientas ---------------------------- */
.amb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding: .8rem 1.25rem; background: #fff;
       border-bottom: 4px solid var(--am-madera); }
.amb-titulo { flex: 1 1 320px; min-width: 0; }
.amb .amb-nombre { margin: 0; font: 700 1.4rem/1.2 var(--am-serif); letter-spacing: -0.01em; color: var(--am-tinta); }
.amb .amb-lema { margin: .15rem 0 0; font-size: .85rem; color: var(--am-suave); }
.amb-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.amb-tabs a { display: inline-block; padding: .4rem .85rem; border: 1px solid var(--am-borde); border-radius: 999px; background: #fff;
              font-size: .85rem; font-weight: 600; color: var(--am-madera-osc); text-decoration: none; white-space: nowrap; }
.amb-tabs a:hover { background: var(--am-hueso); }
.amb-tabs a[aria-current="page"] { background: var(--am-madera); border-color: var(--am-madera); color: #fff; }
@media (max-width: 767px) { .amb { padding: .6rem .9rem; } .amb .amb-nombre { font-size: 1.15rem; } .amb .amb-lema { display: none; } }

/* 3. Pie del sitio (réplica del de WordPress) --------------------------------------------------- */
.amf { text-align: center; font-size: 15px; color: var(--am-texto); padding: 1.5rem 1rem 2rem; }
.amf a { color: inherit; text-decoration: none; }
.amf a:hover, .amf a:focus-visible { color: var(--am-madera-osc); text-decoration: underline; }

/* 4. Botones, enlaces y foco -------------------------------------------------------------------- */
.am-btn, .am-btn-linea { display: inline-block; font: inherit; font-weight: 700; padding: .75rem 1.2rem; border-radius: 4px; cursor: pointer; text-decoration: none; text-align: center; }
.am-btn { background: var(--am-madera); color: #fff !important; border: 0; border-bottom: 3px solid var(--am-madera-osc); }
.am-btn:hover { background: var(--am-madera-osc); }
.am-btn-linea { background: #fff; color: var(--am-madera-osc) !important; border: 1px solid var(--am-borde); }
.am-btn-linea:hover { background: var(--am-hueso); }
body.am-app :focus-visible { outline: 3px solid #C99A5E; outline-offset: 2px; }

/* 5. Optimizador: los tonos ámbar de Tailwind pasan al marrón de la marca ----------------------- */
body.am-app .bg-amber-600 { background-color: var(--am-madera) !important; }
body.am-app .hover\:bg-amber-700:hover, body.am-app .active\:bg-amber-800:active { background-color: var(--am-madera-osc) !important; }
body.am-app .bg-amber-100 { background-color: var(--am-crema) !important; }
body.am-app .hover\:bg-amber-200:hover { background-color: var(--am-borde) !important; }
body.am-app .text-amber-900, body.am-app .text-amber-800, body.am-app .text-amber-700 { color: var(--am-madera-osc) !important; }
body.am-app .border-amber-200, body.am-app .border-amber-300 { border-color: var(--am-borde) !important; }

/* 6. Texto informativo bajo la herramienta (igual en todas) ------------------------------------- */
.am-info { background: var(--am-hueso); border-top: 1px solid var(--am-borde); color: var(--am-tinta); font-family: var(--am-sans); line-height: 1.65; }
.am-info-caja { max-width: 780px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; }
.am-info h2 { font-family: var(--am-serif); font-size: 1.35rem; line-height: 1.2; margin: 2rem 0 .75rem; }
.am-info h2:first-child { margin-top: 0; }
.am-info p, .am-info li { font-size: 1rem; margin: 0 0 .9rem; }
.am-info a { color: var(--am-madera-osc); }

@media print { .amh, .amb-tabs, .amf { display: none !important; } }

/* Texto solo para buscadores y lectores de pantalla (no se ve, sí se lee) */
.am-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
         clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Móvil: las herramientas van en una sola fila que se desplaza */
@media (max-width: 767px) {
    .amb-tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: none; }
    .amb-tabs::-webkit-scrollbar { display: none; }
    .amb-tabs a { flex: none; padding: .35rem .75rem; font-size: .8rem; }
}