/* =====================================================================
   BANNER DE COOKIES · tucasanocambia.com
   ---------------------------------------------------------------------
   Estilos del aviso. Va en fichero aparte (y no en el <style> de cada
   pagina) porque lo comparten la landing y la pagina de gracias. El
   marcado lo inyecta assets/cookies.js.

   Este fichero tiene DOS mitades y conviene no mezclarlas al tocarlo:

     1. Los estilos propios del aviso, copiados literalmente del embed de
        jubenial.com (public/embed/cookies.js, seccion «2 · ESTILOS»). Si
        alli cambia algo, se copia aqui igual.

     2. La reproduccion de lo que en jubenial pinta Tabler y aqui no
        existe, porque esta pagina no carga el tema: los botones, la tabla
        y la utilidad .text-secondary. Los valores salen de
        public/assets/css/tabler.min.css y de custom.min.css, que
        sobreescribe la paleta. No estan puestos a ojo:

          --tblr-primary    #FF435F   (custom.min.css)
          --tblr-secondary  #bc5670   (custom.min.css)
          --tblr-success    #2fb344   (tabler)
          --tblr-light      #fcfdfe   (texto de los botones)
          .btn              padding .5625rem 1rem · 0.875rem · peso 500
          .btn-sm           padding .125rem .25rem · 0.75rem · radio 2px
          celdas de tabla   padding .75rem · borde 1px rgba(4,32,69,.14)
          th                0.625rem, peso 600, mayusculas, .04em, #bc5670

   Tipografia: la pila del sistema, que es --tblr-font-sans-serif. Es lo
   que renderiza el aviso en jubenial.com, asi que el banner NO usa la
   Poppins del resto de esta pagina.

   OJO al tamano de los botones: con el relleno de .btn-sm quedan en unos
   21px de alto. Es lo que miden en jubenial.com y es lo que se pidio
   replicar, pero queda por debajo de cualquier recomendacion de area de
   pulsado en movil (44px). Si algun dia se corrige, es la regla .btn de
   aqui abajo y nada mas.
====================================================================== */


/* =====================================================================
   1 · ESTILOS DEL AVISO · copia literal del embed de jubenial.com
   ===================================================================== */

#cookies{display:block;position:fixed;left:0;right:0;top:0;bottom:0;
    background-color:transparent;z-index:99999;pointer-events:none}
#cookies[hidden]{display:none}
#cookies .container{margin:0;width:100%;height:100%;padding:15px;display:block;position:relative}

.cookieContainer{position:fixed;bottom:20px;left:20px;width:100%;max-width:450px;
    background-color:#fff;border-radius:5px;box-shadow:0px 0px 5px rgba(0,0,0,0.3);z-index:100000;
    padding:20px 20px 10px 20px;overflow:auto;pointer-events:auto;max-height:90vh}
@media screen and (max-width:768px){
  .cookieContainer{left:50%!important;transform:translateX(-50%)!important;
      width:90%!important;bottom:20px!important}
}
.cookieContainer:focus{outline:none}

.cookieMsg{display:block;text-align:justify;color:#121212;font-size:10pt;margin-bottom:20px}
/* El margin-bottom NO esta en el original: alli se lo da el reboot de
   Tabler (h5 -> .5rem). Esta pagina lleva un reset `*{margin:0}` que lo
   deja a cero, asi que hay que reponerlo o el titulo queda pegado al
   texto. Mismo valor que el que aplica Tabler. */
.cookieMsg > h5{max-width:calc(100% - 35px);margin-top:0!important;margin-bottom:.5rem;
    color:#121212;font-size:12pt;font-weight:bold}
.cookieMsg > span{color:#121212;font-size:11pt}

.cookieFooter{display:flex;flex-flow:row;flex-wrap:wrap;align-items:center;justify-content:center}
.cookieFooter button{margin:0 5px 10px 5px}

.infoCookie{cursor:pointer}
.cookieSelector > table{font-size:10pt;color:#000000}

.cookie-toggle{display:flex;width:fit-content;position:relative;box-sizing:border-box;margin:auto}
.cookie-toggle input[type="checkbox"]{position:absolute;margin:0;left:0;top:0;z-index:10;width:100%;
    height:100%;cursor:pointer;opacity:0}
.cookie-toggle label{position:relative;display:flex;align-items:center;box-sizing:border-box;
    box-shadow:none!important}
.cookie-toggle label:before{content:"";width:48px;height:25px;position:relative;display:inline-block;
    background:#FFF;border-radius:28px;border:2px solid #000;box-sizing:border-box;transition:0.2s ease-in}
.cookie-toggle label:after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;
    left:4px;top:4px;z-index:2;background:#000;box-sizing:border-box;transition:0.2s ease-in}
.cookie-toggle input[type="checkbox"]:checked + label:before{background:#000}
.cookie-toggle input[type="checkbox"]:checked + label:after{left:28px;background:#FFF}

.cookie-description{width:100%;margin-top:10px;border-radius:5px;background-color:#F7F8F9;
    padding:10px;display:flex;flex-flow:column;align-items:stretch;font-size:9pt}
.cookie-desc-line{display:flex;flex-wrap:nowrap;margin-bottom:5px}
.cookie-desc-line:last-child{margin-bottom:0}
.cookie-desc-line>b{min-width:80px}
.rotate-180>svg{transform:rotate(180deg)}


/* =====================================================================
   2 · LO QUE EN JUBENIAL PONE TABLER · aqui no hay tema que lo pinte
   ===================================================================== */

/* TODO lo de esta seccion va acotado bajo #cookies, y no es manía: la
   landing y la pagina de gracias YA tienen su propia clase .btn —el boton
   coral en pildora de los CTA— y esta hoja se carga despues de su <style>.
   Sin acotar, .btn de aqui ganaria por orden de cascada y les dejaria los
   botones de la pagina con el tamaño diminuto de Tabler. Lo mismo vale
   para .table y .container, que tambien existen fuera del aviso. */

/* La fuente se aplica en el contenedor para que la hereden tabla, botones
   y descripciones sin repetirla en cada regla. */
#cookies .cookieContainer{
    font-family:-apple-system,BlinkMacSystemFont,"San Francisco","Segoe UI",Roboto,"Helvetica Neue",sans-serif;
    color:#121212;line-height:1.4285714286}
#cookies .cookieContainer a{color:#FF435F}
#cookies .text-secondary{color:#bc5670}

/* --- .btn + .btn-sm --- */
#cookies .btn{display:inline-block;padding:.5625rem 1rem;font-family:inherit;font-size:.875rem;
    font-weight:500;line-height:1.4285714286;color:#121212;text-align:center;vertical-align:middle;
    cursor:pointer;background-color:transparent;border:1px solid transparent;border-radius:4px;
    text-transform:none;letter-spacing:normal;
    -webkit-user-select:none;-moz-user-select:none;user-select:none;
    transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}
#cookies .btn-sm{padding:.125rem .25rem;font-size:.75rem;border-radius:2px}
#cookies .btn:focus-visible{outline:2px solid #121212;outline-offset:2px}

/* Tabler resuelve el hover bajando el fondo al 80% de opacidad. */
#cookies .btn-primary{background-color:#FF435F;color:#fcfdfe}
#cookies .btn-primary:hover{background-color:rgba(255,67,95,.8);color:#fcfdfe}
#cookies .btn-secondary{background-color:#bc5670;color:#fcfdfe}
#cookies .btn-secondary:hover{background-color:rgba(188,86,112,.8);color:#fcfdfe}
#cookies .btn-success{background-color:#2fb344;color:#fcfdfe}
#cookies .btn-success:hover{background-color:rgba(47,179,68,.8);color:#fcfdfe}

/* --- .table --- */
#cookies .cookieSelector .table{width:100%;margin-bottom:1rem;border-collapse:collapse;
    vertical-align:top;color:#121212}
#cookies .cookieSelector .table > :not(caption) > * > *{padding:.75rem .75rem;
    border-bottom:1px solid rgba(4,32,69,.14);background-color:transparent}
#cookies .cookieSelector .table > thead{vertical-align:bottom}
#cookies .cookieSelector .table th{color:#bc5670;background:#fcfdfe;font-size:.625rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;line-height:1rem;
    padding-top:.5rem;padding-bottom:.5rem;white-space:nowrap;text-align:left}


/* =====================================================================
   3 · PROPIO DE ESTA LANDING · no existe en jubenial
   ===================================================================== */

/* Enlace «Gestionar cookies» del pie. Es mobiliario de la pagina, no del
   aviso, asi que hereda la Poppins de la landing y no la del banner. */
.ck-enlace{background:none;border:none;padding:0;font:inherit;color:inherit;
    cursor:pointer;text-decoration:none}
.ck-enlace:hover{text-decoration:underline}

/* Convivencia con las moscas: la barra inferior de movil ocupa el mismo
   sitio que el aviso, asi que se retira mientras esta abierto. La pastilla
   lateral de PC va centrada en vertical y no estorba. */
.ck-abierto .mosca-movil{display:none}