/* Base styles for Sorteo site */
:root{
  --primary:#e6f20f; /* lime yellow */
  --primary-700:#c5d10e;
  --accent:#6b4fd6; /* purple */
  --text:#111;
  --bg:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#fafaf7}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}

/* Header / Navbar */
.header{
  background:var(--primary);
  position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--primary-700);
}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;position:relative}
.brand{font-weight:800;font-size:1.3rem;letter-spacing:1px}
.menu{display:flex;align-items:center;gap:18px;font-weight:600;flex-wrap:wrap}
.menu a{padding:8px 14px;border-radius:8px;transition:background .2s}
.menu a:hover{background:var(--accent);color:#fff}
.cta{
  background:var(--accent);color:#fff;border:2px solid var(--primary-700);padding:10px 18px;border-radius:12px;font-weight:800;box-shadow:0 2px 0 var(--primary-700);transition:background .2s, color .2s
}
.cta:hover{background:var(--primary-700);color:#222}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;background:var(--primary);border:2px solid var(--accent);border-radius:10px;padding:8px 12px;font-weight:800}
.menu-toggle:after{content:"☰";font-size:18px;line-height:1}
.quick-tickets{display:none;background:var(--accent);color:#fff;border:2px solid var(--primary-700);border-radius:999px;padding:8px 12px;font-weight:900;box-shadow:0 3px 0 var(--primary-700)}
.quick-tickets:hover{opacity:.92}

@media (max-width: 900px) {
  .nav {flex-direction:column;align-items:flex-start;gap:8px;}
  .menu {flex-direction:column;align-items:flex-start;width:100%;gap:8px;}
  .menu a, .cta {width:100%;text-align:left;}
}

@media (max-width: 600px) {
  .container {padding:0 6px;}
  .nav {padding:8px 0;}
  .brand {font-size:1.1rem;}
  .menu-toggle {display:flex;}
  .menu {display:none;}
  .menu.open {display:flex;flex-direction:column;}
}

/* Hero */
.hero{background:var(--accent);color:#fff}
.hero .container{padding:28px 16px}
.hero h1{margin:0;font-size:34px}
.hero p{opacity:.9;margin:6px 0 0}

/* Image card */
.card{background:#fff;border-radius:14px;border:2px solid #222;box-shadow:6px 6px 0 #222;overflow:hidden}
.card a{position:relative;display:block}
.card img{width:100%;height:auto;display:block}
.card .caption{padding:16px;text-align:center}
/* Centered overlay CTA over image */
.cta-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);color:#fff;border:2px solid #fff;border-radius:16px;padding:14px 18px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35);pointer-events:none}
.cta-overlay strong{display:block;font-size:22px;line-height:1.2}
.cta-overlay span{display:block;opacity:.95;margin-top:4px}
.card a:hover .cta-overlay{transform:translate(-50%,-50%) scale(1.03)}
/* Glow + pulse ring animation */
@keyframes glowPulse{0%{box-shadow:0 0 0 4px rgba(255,232,0,.4),0 0 0 0 rgba(255,232,0,.0)}50%{box-shadow:0 0 28px 6px rgba(255,232,0,.8),0 0 0 8px rgba(255,232,0,.15)}100%{box-shadow:0 0 0 4px rgba(255,232,0,.4),0 0 0 0 rgba(255,232,0,.0)}}
.cta-overlay{animation:glowPulse 2.2s ease-in-out infinite}

/* Arrow bounce decoration */
.cta-arrow{display:inline-block;margin-top:6px;font-size:18px}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.cta-arrow{animation:bounceY 1.4s ease-in-out infinite}

/* Features list */
.features{display:grid;grid-template-columns:1fr;gap:16px;margin:20px 0}
.feature-list{background:#fff;border:1px dashed #999;border-radius:12px;padding:14px}
.feature-list h3{margin:0 0 8px}
.feature-list ul{margin:0;padding-left:18px}
.feature-list li{margin:6px 0}

/* Forms */
.form{background:#fff;border:2px solid #222;border-radius:18px;box-shadow:8px 8px 0 #222;padding:24px}
.form.narrow{max-width:520px;margin:0 auto}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form.one-col .row{grid-template-columns:1fr}
.form .row-single{display:block}
label{display:block;font-weight:800;margin:10px 0 6px}
input,select{width:100%;padding:13px 14px;border:2px solid #111;border-radius:999px;box-shadow:0 4px 0 #000;background:#faf5dd}
input:focus,select:focus{outline:none;border-color:#6b4fd6;box-shadow:0 4px 0 #000,0 0 0 3px rgba(107,79,214,.25)}
button.btn{background:#6b4fd6;color:#fff;border:2px solid #000;border-radius:999px;padding:14px 18px;font-weight:900;box-shadow:0 4px 0 #000}
button.btn:hover{opacity:.9}
button.secondary{background:#ffe800;color:#111;border:2px solid #000;border-radius:999px;padding:12px 16px;font-weight:900;box-shadow:0 3px 0 #000}

/* Popup modal */
.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.7);align-items:center;justify-content:center}
.modal.show{display:flex}
.modal-content{background:#fff;border:3px solid #000;border-radius:18px;box-shadow:0 12px 0 #000;max-width:420px;width:92%;padding:20px;position:relative;max-height:80vh;overflow:auto}
.modal-header{text-align:center;margin-bottom:16px}
.modal-header h2{margin:0;color:#6b4fd6}
.modal-body{text-align:center}
.ticket-display{background:#faf5dd;border:2px solid #111;border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 4px 0 #000}
.ticket-display .label{font-weight:800;margin:8px 0 4px}
.ticket-display .value{font-size:20px;color:#6b4fd6;font-weight:900}
.ticket-numbers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.ticket-num{background:#ffe800;border:2px solid #000;border-radius:8px;padding:6px 10px;font-weight:800;box-shadow:0 2px 0 #000}
.modal-footer{display:flex;gap:10px;margin-top:16px;justify-content:center;flex-wrap:wrap}

/* Responsive tweaks for small screens */
@media(max-width: 480px){
  .modal-content{width:95%;padding:16px;border-radius:16px;max-height:85vh}
  .ticket-numbers{gap:6px}
  .ticket-num{padding:5px 8px;font-size:14px}
  .modal-header h2{font-size:20px}
  .modal-footer .btn,
  .modal-footer .secondary,
  .modal-footer .cta{flex:1 1 100%}
}
/* Print styles for thermal printers (80mm) */
@media print{
  /* Hide everything except modal content OR results section */
  body *{visibility:hidden}
  .modal-content,.modal-content *{visibility:visible}
  #results, #results *{visibility:visible}
  
  /* Reset layout for thermal printer */
  @page {
    size: 80mm auto;
    margin: 0;
  }
  
  body, html{
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .modal{
    position: static;
    background: none;
    display: block;
    width: 80mm;
    margin: 0;
    padding: 0;
  }
  
  .modal-content, #results{
    position: static;
    width: 80mm;
    max-width: 80mm;
    margin: 0;
    padding: 0mm 3mm; /* no top padding to start at the very top */
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: white;
  }
  
  .modal-header h2{
    font-size: 14pt;
    margin: 0 0 2mm;
    text-align: center;
  }
  
  .modal-body, #results{
    text-align: center;
    font-size: 10pt;
  }
  
  .modal-body p, #results p{
    margin: 1mm 0;
  }
  
  .modal-body .label, #results .label{
    font-size: 9pt;
    margin: 2mm 0 1mm;
    font-weight: bold;
  }
  
  .ticket-display{
    background: white;
    border: 1.2pt solid #000; /* stronger border for clarity */
    border-radius: 1mm;
    padding: 1.5mm;
    margin: 0.5mm 0; /* reduce spacing above/below */
    box-shadow: none;
  }
  
  .ticket-display .label{
    font-size: 8pt;
    margin: 0.5mm 0;
  }
  
  .ticket-display .value{
    font-size: 12pt; /* larger for visibility */
    font-weight: 900;
    margin: 0.3mm 0;
  }
  
  .ticket-numbers{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5mm;
    justify-content: center;
    margin: 2mm 0;
  }
  
  .ticket-num{
    background: #fff;
    border: 1px solid #000;
    border-radius: 1.5mm;
    padding: 1.5mm 2.5mm;
    font-weight: 800;
    font-size: 10pt;
    box-shadow: none;
  }
  
  .modal-footer, #results button, #results .secondary{
    display: none !important;
  }

  /* Ensure content prints at top without extra whitespace */
  #results{page-break-inside: avoid}
  #results *{break-inside: avoid}
  
  /* Add footer text for thermal print */
  /* Remove footer to avoid extra bottom space on thermal paper */
  .modal-content::after, #results::after{ content: none }
}

/* Winners list styling */
.winner-list{display:flex;flex-direction:column;gap:12px}
.winner-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;border:2px solid #111;box-shadow:0 3px 0 #000;transition:transform 0.2s}
.winner-item:hover{transform:translateY(-2px)}
.winner-num{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffe800;border:2px solid #000;border-radius:50%;font-weight:900;font-size:18px;box-shadow:0 2px 0 #000;flex-shrink:0}
.winner-info{flex:1;min-width:0}
.winner-name{font-weight:800;font-size:16px;margin-bottom:4px}
.winner-prize{color:#6b4fd6;font-weight:700;font-size:14px}
.premio-efectivo{background:linear-gradient(135deg, #fff9e6 0%, #fff 100%)}
.premio-moto{background:linear-gradient(135deg, #e6f7ff 0%, #fff 100%)}
.premio-iphone{background:linear-gradient(135deg, #ffe6f0 0%, #fff 100%)}
.premio-carguero{background:linear-gradient(135deg, #e6ffe6 0%, #fff 100%)}
.premio-trimovil{background:linear-gradient(135deg, #f0e6ff 0%, #fff 100%)}

/* Upload field styling */
.file-input{position:relative;display:flex;align-items:center;gap:10px}
.file-input input[type=file]{position:absolute;left:-9999px}
.file-input .fake{display:inline-flex;align-items:center;gap:8px;background:#ffe800;border:2px solid #000;border-radius:999px;padding:10px 14px;font-weight:900;box-shadow:0 4px 0 #000;cursor:pointer}
.file-input .name{flex:1;min-width:0;color:#555;font-weight:600}

.panel{position:relative;background:#f77c1f;border:2px solid #000;border-radius:22px;box-shadow:0 10px 0 #000;padding:24px;color:#111;max-width:560px;margin:0 auto}
.panel h2{margin:0 0 12px;text-align:center;color:#fff;text-shadow:0 2px 0 #000,0 0 18px rgba(255,232,0,.8)}
.panel .sub{margin-top:-6px;text-align:center;color:#fff}

/* Footer */
.footer{margin:40px 0 20px;text-align:center;color:#666}

@media(min-width:900px){
  .features{grid-template-columns:2fr 1fr}
}

/* Small screens */
@media(max-width: 800px){
  .hero .container{padding:20px 16px}
  .hero h1{font-size:26px}
  .menu-toggle{display:inline-flex}
  .quick-tickets{display:inline-flex;align-items:center}
  .menu{display:none;flex-direction:column;gap:10px;position:absolute;left:16px;right:16px;top:60px;background:#fff;border:2px solid #222;border-radius:12px;padding:12px;box-shadow:8px 8px 0 #222}
  .menu.open{display:flex}
  .cta{width:100%;text-align:center}
  .form .row{grid-template-columns:1fr}
  .feature-list{padding:12px}
  .cta-overlay strong{font-size:18px}
  .cta-overlay{padding:12px 14px}
  .panel{padding:16px}
}