:root { --azul:#123b63; --naranja:#f28c28; --texto:#18324b; --gris:#526679; --borde:#d4e0eb; }
    * { box-sizing:border-box; }
    [hidden] { display:none !important; }
    body { margin:0; color:var(--texto); background:#f2f6fa; font:16px/1.5 Arial,sans-serif; }
    header { background:var(--azul); color:white; border-bottom:4px solid var(--naranja); }
    .cabecera { max-width:900px; margin:auto; padding:24px; display:flex; align-items:center; gap:20px; }
    .logo { width:90px; height:90px; flex-shrink:0; padding:5px; background:white; border-radius:12px; object-fit:contain; }
    .marca { font-size:27px; font-weight:800; letter-spacing:1px; }
    .submarca { font-size:14px; color:#dbe7f2; }
    main { max-width:900px; padding:24px; margin:auto; }
    .tarjeta { background:white; border:1px solid var(--borde); border-radius:18px; padding:28px; box-shadow:0 5px 20px #123b6308; }
    h1 { font-size:24px; margin:0 0 6px; line-height:1.3; }
    .ayuda { margin:0 0 24px; color:var(--gris); font-size:14px; }
    fieldset { min-width:0; border:0; padding:0; margin:0; }
    .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
    .campo { min-width:0; }
    .campo>label,.etiqueta { display:block; margin:0 0 7px; font-size:13px; font-weight:bold; letter-spacing:.3px; }
    .opcional { font-size:12px; font-weight:normal; color:var(--gris); letter-spacing:0; }
    select,input:not([type=radio]):not([type=checkbox]) { width:100%; height:48px; padding:10px 12px; border:1px solid #b7c9db; border-radius:9px; font:inherit; color:var(--texto); background:white; min-width:0; }
    .otro { margin-top:8px; }
    button { border:0; border-radius:9px; min-height:46px; padding:11px 16px; font:700 15px/1.3 Arial,sans-serif; cursor:pointer; }
    button:disabled { opacity:.6; cursor:default; }
    input:focus-visible,select:focus-visible,button:focus-visible { outline:3px solid var(--naranja); outline-offset:3px; }
    .moldeo { margin-top:26px; padding-top:24px; border-top:1px solid var(--borde); }
    legend { font-weight:bold; padding:0; font-size:17px; }
    .opciones { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:0; }
    .opcion { display:flex; align-items:center; gap:10px; min-height:56px; padding:14px; background:#f5f8fb; border:1px solid var(--borde); border-radius:10px; cursor:pointer; font-size:14px; font-weight:bold; line-height:1.3; }
    .opcion.activa { background:#e9f2fa; border-color:var(--azul); box-shadow:inset 0 0 0 1px var(--azul); }
    input[type=radio],input[type=checkbox] { margin:0; width:20px; height:20px; flex:0 0 20px; accent-color:var(--azul); padding:0; }
    #tiposMoldeo { margin-top:24px; }
    .tipos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 16px; }
    .tipos .opcion { padding:12px; min-height:50px; }
    .nota { color:var(--gris); font-size:13px; margin:6px 0; }
    .fila { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; background:#f5f8fb; border:1px solid var(--borde); border-radius:10px; margin-top:10px; }
    .fila>label { font-size:14px; font-weight:bold; }
    .contador { display:grid; grid-template-columns:44px 64px 44px; gap:6px; align-items:center; flex-shrink:0; }
    .contador button { width:44px; min-height:44px; height:44px; padding:0; margin:0; background:var(--azul); color:white; font-size:23px; }
    .contador input { padding:6px !important; height:44px !important; text-align:center; appearance:textfield; }
    .contador input::-webkit-inner-spin-button,.contador input::-webkit-outer-spin-button { appearance:none; margin:0; }
    .resumen { padding:12px 14px; border-left:3px solid var(--naranja); background:#fff7ef; border-radius:4px; font-size:14px; margin-top:18px; }
    .guardar { width:100%; background:var(--azul); color:white; min-height:52px; margin-top:26px; }
    .secundario { background:#e6eef6; color:var(--azul); }
    .acciones { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
    #registrosRecientes { margin:18px 0; padding:14px; background:#f5f8fb; border-radius:10px; }
    #listaRecientes { display:grid; gap:8px; margin:12px 0; }
    #listaRecientes button { text-align:left; overflow-wrap:anywhere; }
    .mensaje { margin:18px 0 0; padding:14px 16px; border-radius:10px; white-space:pre-line; overflow-wrap:anywhere; font-size:14px; }
    .mensaje.info { background:#e9f2fa; }
    .mensaje.error { background:#fff0f0; color:#8a2222; }
    .mensaje.exito { background:#e4f5ed; color:#16553e; }
    fieldset:disabled .opcion { cursor:default; }
    footer { color:var(--gris); text-align:center; font-size:12px; padding:20px 0 0; }
    @media(max-width:600px) {
      .cabecera { padding:20px 16px; gap:14px; }
      .logo { width:72px; height:72px; } .marca { font-size:24px; }
      main { padding:16px 12px; } .tarjeta { padding:20px 16px; }
      h1 { font-size:21px; } .grid { grid-template-columns:1fr; gap:16px; }
      .opciones { grid-template-columns:1fr; gap:10px; }
      .tipos { grid-template-columns:1fr; gap:8px; }
      .fila { padding:10px; } .contador { grid-template-columns:40px 54px 40px; gap:4px; }
      .contador button { width:40px; } .fila>label { font-size:12px; }
    }
    .bloque { margin-top:20px; } h2 { font-size:22px; margin:0 0 10px; }
    .paso { color:var(--gris); font-size:12px; font-weight:bold; letter-spacing:1px; margin-bottom:10px; }
    .codigo { overflow-wrap:anywhere; font-weight:bold; color:var(--azul); background:#e9f2fa; padding:12px; border-radius:8px; }
    .avance { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font-size:14px; }
    .avance span { color:var(--gris); } progress { width:100%; height:10px; accent-color:var(--naranja); margin:10px 0 22px; }
    .fotos-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .foto-card { min-width:0; padding:16px; border:1px solid var(--borde); border-radius:12px; background:#f9fbfd; }
    .foto-card h3 { margin:0 0 4px; font-size:16px; } .foto-card p { font-size:13px; margin:4px 0 12px; color:var(--gris); }
    .foto-card[data-estado="guardada"] { border-color:#8abda5; }
    .foto-card[data-estado="error"] { border-color:#cb8080; }
    .foto-preview { width:100%; height:160px; object-fit:contain; background:#edf2f6; border-radius:8px; margin-bottom:10px; }
    .foto-botones { display:flex; flex-wrap:wrap; gap:8px; } .foto-botones button { font-size:13px; padding:10px; flex:1 1 auto; }
    .foto-botones .camara { color:white; background:var(--azul); }
    dialog { border:0; border-radius:14px; width:min(94vw,900px); max-height:94vh; padding:16px; color:var(--texto); }
    dialog::backdrop { background:#071d32bd; } .visor-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
    #imagenVisor { display:block; max-width:100%; max-height:75vh; margin:auto; object-fit:contain; }
    @media(max-width:600px) { .fotos-grid { grid-template-columns:1fr; } .foto-preview { height:190px; } .acciones>button { flex:1 1 auto; } }
    textarea { width:100%; border:1px solid #b7c9db; border-radius:9px; padding:12px; font:inherit; color:var(--texto); resize:vertical; background:white; }
    textarea:focus-visible,.boton-enlace:focus-visible { outline:3px solid var(--naranja); outline-offset:3px; }
    #textoEnvio { font-size:14px; line-height:1.5; }
    .whatsapp { background:#167a4b; color:white; }
    .boton-enlace { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:11px 16px; border-radius:9px; font:700 14px/1.3 Arial,sans-serif; text-decoration:none; text-align:center; cursor:pointer; }
    .boton-enlace[aria-disabled="true"] { opacity:.6; pointer-events:none; }
    #alternativaWhatsapp p { margin:0 0 12px; }
