/*
|--------------------------------------------------------------------------
| Meteo Diari de Tarragona
| Widget Design System v1.0
|--------------------------------------------------------------------------
*/
:root{
    /* Colores */
    --dt-primary:#005a9c;
    --dt-primary-light:#edf5fb;
    --dt-secondary:#f58220;
    --dt-success:#22c55e;
    --dt-warning:#f59e0b;
    --dt-danger:#ef4444;
    --dt-text:#243447;
    --dt-muted:#6b7280;
    --dt-border:#e5e7eb;
    --dt-bg:#ffffff;
    /* Radios */
    --dt-radius:12px;
    /* Espaciados */
    --dt-space-xs:4px;
    --dt-space-sm:8px;
    --dt-space-md:12px;
    --dt-space-lg:16px;
    --dt-space-xl:20px;
    /* Tipografía */
    --dt-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
/* ------------------------------------------------ */
*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
html{
    font-size:16px;
}
body{
    background:transparent;
    font-family:var(--dt-font);
    color:var(--dt-text);
    padding:10px;
}
/* ------------------------------------------------ */
.dt-widget{
    display:block;
    width:100%;
    /* max-width:420px; */
    min-width:280px;
    margin:0 auto;
    background:#fff;
    border:1px solid var(--dt-border);
    border-radius:var(--dt-radius);
    overflow:hidden;
}
/* ------------------------------------------------ */
.dt-widget-header{
    padding:14px 16px;
    border-bottom:1px solid var(--dt-border);
}
.dt-widget-title{
    font-size:1.05rem;
    font-weight:750;
    line-height:1.25;
    color:var(--dt-text);
}
.dt-widget-subtitle{
    margin-top:4px;
    font-size:.76rem;
    line-height:1.3;
    color:var(--dt-muted);
}
/* ==================================================
   Widget headers
================================================== */
.dt-widget-risk .dt-widget-title{
    color:#b45309;
}
.dt-widget-hot .dt-widget-title{
    color:#dc2626;
}
.dt-widget-cold .dt-widget-title{
    color:#0369a1;
}
.dt-widget-ranking .dt-widget-title{
    color:var(--dt-primary);
}
.dt-widget-summary .dt-widget-title{
    color:var(--dt-primary);
}
/* ------------------------------------------------ */
.dt-widget-body{
    display:flex;
    flex-direction:column;
    width:100%;
}
/* ------------------------------------------------ */
.dt-widget-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-top:1px solid var(--dt-border);
    font-size:.7rem;
    color:var(--dt-muted);
}
.dt-widget-updated-value{
    font-weight:600;
    color:#4b5563;
}
/* ------------------------------------------------ */
.dt-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:10px;
    padding:10px 16px;
    border-bottom:1px solid var(--dt-border);
    transition:background .15s ease;
}
.dt-row:last-child{
    border-bottom:none;
}
@media (hover:hover){
.dt-row:hover{
    background:#f7f9fb;
}
}
/* ------------------------------------------------ */
.dt-rank{
    width:26px;
    height:26px;
    flex:none;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:var(--dt-primary-light);
    color:var(--dt-primary);
    font-size:.82rem;
    font-weight:700;
}
/* TOP */
.dt-rank.top1{
    background:#fff7d6;
    color:#b7791f;
}
.dt-rank.top2{
    background:#eef2f7;
    color:#64748b;
}
.dt-rank.top3{
    background:#f9ece4;
    color:#92400e;
}
/* ------------------------------------------------ */
.dt-name{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.92rem;
    line-height:1.3;
}
/* ------------------------------------------------ */
.dt-value{
    flex:0 0 auto;
    width:56px;
    text-align:right;
    font-size:1.5rem;
    font-weight:700;
    color:var(--dt-secondary);
    line-height:1;
}
.dt-blue {
    color: var(--dt-primary);
}
.dt-red {
    color: var(--dt-danger);
}
/* ------------------------------------------------ */
/* KPIs */
.dt-kpi{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border-bottom:1px solid var(--dt-border);
}
.dt-kpi-label{
    color:var(--dt-muted);
    font-size:.82rem;
}
.dt-kpi-value{
    font-size:1.6rem;
    font-weight:700;
    color:var(--dt-primary);
}
/* ------------------------------------------------ */
/* Badges */
.dt-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:4px 8px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:600;
}
.dt-badge-success{
    background:#ecfdf3;
    color:#15803d;
}
.dt-badge-warning{
    background:#fff8e6;
    color:#b45309;
}
.dt-badge-danger{
    background:#fef2f2;
    color:#b91c1c;
}
/* ------------------------------------------------ */
/* Grid */
.dt-grid{
    display:grid;
    gap:12px;
}
.dt-grid-2{
    grid-template-columns:repeat(2,1fr);
}
.dt-grid-3{
    grid-template-columns:repeat(3,1fr);
}
/* ------------------------------------------------ */
@media (max-width:480px){
body{
    padding:6px;
}
.dt-widget{
    min-width:auto;
}
.dt-widget-header{
    padding:12px 14px;
}
.dt-widget-title{
    font-size:1rem;
}
.dt-widget-footer{
    padding:8px 14px;
}
.dt-row{
    padding:9px 14px;
}
.dt-value{
    font-size:1.35rem;
}
.dt-grid-2,
.dt-grid-3{
    grid-template-columns:1fr;
}
}
/* ------------------------------------------------ */
/* Highlight widget */
/* ------------------------------------------------ */
.dt-highlight{
    padding:20px;
    text-align:center;
}
.dt-highlight-place{
    font-size:1.1rem;
    font-weight:700;
    color:var(--dt-text);
}
.dt-highlight-value{
    margin-top:8px;
    font-size:2.4rem;
    line-height:1;
    font-weight:800;
    color:var(--dt-secondary);
}
.dt-highlight-label{
    margin-top:8px;
    font-size:.8rem;
    color:var(--dt-muted);
}
.dt-highlight-grid{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    border-top:1px solid var(--dt-border);
    padding-top:14px;
}
.dt-highlight-grid div{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.dt-highlight-grid span{
    font-size:.75rem;
    color:var(--dt-muted);
}
.dt-highlight-grid strong{
    font-size:1.25rem;
    color:var(--dt-primary);
}
.dt-empty{
    padding:20px;
    text-align:center;
    color:var(--dt-muted);
}
/* ------------------------------------------------ */
/* Highlight widgets */
/* ------------------------------------------------ */
.dt-widget-highlight .dt-highlight{
    padding:20px;
    text-align:center;
}
/*
|--------------------------------------------------------------------------
| Hottest
|--------------------------------------------------------------------------
*/
.dt-widget-hot .dt-widget-title{
    color:#dc2626;
}
.dt-widget-hot .dt-highlight-value{
    color:#ef6c00;
}
.dt-widget-hot .dt-highlight-place{
    color:#b91c1c;
}
.dt-widget-hot .dt-highlight-label{
    color:#9a3412;
}
/*
|--------------------------------------------------------------------------
| Coldest
|--------------------------------------------------------------------------
*/
.dt-widget-cold .dt-widget-title{
    color:#0369a1;
}
.dt-widget-cold .dt-highlight-value{
    color:#0284c7;
}
.dt-widget-cold .dt-highlight-place{
    color:#075985;
}
.dt-widget-cold .dt-highlight-label{
    color:#0c4a6e;
}
/* ==================================================
   Weather Risk Widget
================================================== */
/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/
.dt-widget-risk .dt-widget-title{
    color:#b45309;
}
/*
|--------------------------------------------------------------------------
| Row
|--------------------------------------------------------------------------
*/
.dt-risk-row{
    position:relative;
    align-items:center;
    overflow:hidden;
}
.dt-risk-row::before{
    content:"";
    width:4px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
/*
|--------------------------------------------------------------------------
| Estados
|--------------------------------------------------------------------------
*/
.dt-risk-row.risk-none::before{
    background:#9ca3af;
}
.dt-risk-row.risk-low::before{
    background:#22c55e;
}
.dt-risk-row.risk-medium::before{
    background:#f59e0b;
}
.dt-risk-row.risk-high::before{
    background:#f97316;
}
.dt-risk-row.risk-extreme::before{
    background:#ef4444;
}
/*
|--------------------------------------------------------------------------
| Background estados
|--------------------------------------------------------------------------
*/
.dt-risk-row.risk-extreme{
    background:#fff7f7;
}
.dt-risk-row.risk-high{
    background:#fffaf5;
}
.dt-risk-row.risk-medium{
    background:#fffdf5;
}
/*
|--------------------------------------------------------------------------
| Contenido principal
|--------------------------------------------------------------------------
*/
.dt-risk-main{
    flex:1;
    min-width:0;
}
.dt-risk-place{
    font-size:.92rem;
    font-weight:600;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/*
|--------------------------------------------------------------------------
| Motivo
|--------------------------------------------------------------------------
*/
.dt-risk-reason{
    margin-top:3px;
    font-size:.72rem;
    color:var(--dt-muted);
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/*
|--------------------------------------------------------------------------
| Estado derecha
|--------------------------------------------------------------------------
*/
.dt-risk-status{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    flex:none;
    margin-left:12px;
}
.dt-risk-icon{
    font-size:1.35rem;
    line-height:1;
}
.dt-risk-label{
    font-size:.78rem;
    font-weight:700;
    white-space:nowrap;
}
/*
|--------------------------------------------------------------------------
| Colores
|--------------------------------------------------------------------------
*/
.risk-low .dt-risk-label{
    color:#15803d;
}
.risk-medium .dt-risk-label{
    color:#b45309;
}
.risk-high .dt-risk-label{
    color:#ea580c;
}
.risk-extreme .dt-risk-label{
    color:#b91c1c;
}
/*
|--------------------------------------------------------------------------
| Summary riesgo
|--------------------------------------------------------------------------
*/
.dt-risk-summary{
    padding:10px 16px;
    background:#fff7ed;
    color:#9a3412;
    font-size:.82rem;
    font-weight:600;
    border-bottom:1px solid var(--dt-border);
}
/*
|--------------------------------------------------------------------------
| Mobile UX
|--------------------------------------------------------------------------
*/
@media(max-width:480px){
    .dt-risk-row{
        align-items:center;
        padding-top:11px;
        padding-bottom:11px;
    }
    .dt-risk-reason{
        font-size:.68rem;
        white-space:normal;
    }
    .dt-risk-status{
        margin-left:8px;
    }
    .dt-risk-icon{
        font-size:1.25rem;
    }
    .dt-risk-label{
        display:none;
    }
}
/* ==========================================================
   SUMMARY WEATHER WIDGET
========================================================== */
.dt-widget-summary .dt-widget-body{
    padding:16px;
}
/* ==========================================================
   Temperaturas principales
========================================================== */
.dt-summary-temperature{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.dt-summary-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    min-height:96px;
    padding:14px;
    border-radius:16px;
    overflow:hidden;
}
.dt-summary-item::after{
    content:"";
    position:absolute;
    right:-20px;
    bottom:-25px;
    width:80px;
    height:80px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
}
/* Máxima */
.dt-summary-hot{
    background:
        linear-gradient(
            135deg,
            #fff7ed,
            #ffedd5
        );
}
.dt-summary-hot 
.dt-summary-temperature-value{
    color:#ea580c;
}
/* Mínima */
.dt-summary-cold{
    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );
}
.dt-summary-cold 
.dt-summary-temperature-value{
    color:#0369a1;
}
/* ==========================================================
   Iconos
========================================================== */
.dt-summary-icon{
    position:relative;
    z-index:1;
    width:42px;
    height:42px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.75);
    font-size:1.45rem;
}
/* ==========================================================
   Contenido
========================================================== */
.dt-summary-content{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.dt-summary-label{
    font-size:.68rem;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:700;
    color:#64748b;
}
.dt-summary-temperature-value{
    margin-top:8px;
    font-size:2.4rem;
    line-height:1;
    font-weight:800;
    letter-spacing:-.05em;
}
.dt-summary-place{
    margin-top:12px;
    max-width:130px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    font-size:.75rem;
    font-weight:600;
    color:#475569;
}
/* ==========================================================
   Metadatos inferiores
========================================================== */
.dt-summary-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}
.dt-summary-meta > div{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px;
    border-radius:12px;
    background:#f8fafc;
    border:1px solid #e2e8f0;
    align-items: center;
}
.dt-summary-meta span{
    font-size:.7rem;
    line-height:1.2;
    color:#64748b;
}
.dt-summary-meta strong{
    font-size:1.25rem;
    line-height:1;
    font-weight:750;
    color:#0f172a;
}
/* ==========================================================
   Empty
========================================================== */
.dt-widget-summary .dt-empty{
    padding:24px;
    text-align:center;
    color:#64748b;
    font-size:.85rem;
}
/* ==========================================================
   Responsive móvil
========================================================== */
@media(max-width:480px){
    .dt-widget-summary .dt-widget-body{
        padding:18px 12px;
    }
    
    .dt-summary-item{
        min-height:82px;
        padding:12px;
    }
    .dt-summary-icon{
        width:36px;
        height:36px;
        font-size:1.25rem;
    }
    .dt-summary-temperature-value{
        font-size:1.85rem;
    }
    .dt-summary-place{
        max-width:180px;
        font-size:.72rem;
    }
    
}
/* ==================================================
   Amplitud térmica widget
================================================== */
.dt-widget-amplitude .dt-widget-title{
    color:var(--dt-primary);
}
/*
|--------------------------------------------------------------------------
| Rows
|--------------------------------------------------------------------------
*/
.dt-widget-amplitude .dt-amplitude-row{
    align-items:center;
}
.dt-amplitude-range {
    font-size: 1rem;
    display: flex;
    gap: 0.65rem;
    font-weight: 700;
}
/*
|--------------------------------------------------------------------------
| Valor amplitud
|--------------------------------------------------------------------------
*/
.dt-widget-amplitude .dt-value{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    min-width:70px;
}
.dt-widget-amplitude .dt-value strong{
    font-size:1.45rem;
    line-height:1;
    font-weight:800;
    color:var(--dt-primary);
}
.dt-widget-amplitude .dt-value small{
    margin-top:4px;
    font-size:.68rem;
    line-height:1;
    font-weight:600;
    color:#64748b;
    white-space:nowrap;
}
/*
|--------------------------------------------------------------------------
| Nombre comarca
|--------------------------------------------------------------------------
*/
.dt-widget-amplitude .dt-name{
    font-weight:600;
}
/*
|--------------------------------------------------------------------------
| Top posiciones
|--------------------------------------------------------------------------
*/
.dt-widget-amplitude .dt-rank.top1{
    background:#ede9fe;
    color:#6d28d9;
}
.dt-widget-amplitude .dt-rank.top2{
    background:#f5f3ff;
    color:var(--dt-primary);
}
.dt-widget-amplitude .dt-rank.top3{
    background:#faf5ff;
    color:#9333ea;
}
/*
|--------------------------------------------------------------------------
| Mobile UX
|--------------------------------------------------------------------------
*/
@media(max-width:480px){
    .dt-widget-amplitude .dt-value{
        min-width:62px;
    }
    .dt-widget-amplitude .dt-value strong{
        font-size:1.25rem;
    }
    .dt-widget-amplitude .dt-value small{
        font-size:.62rem;
    }
}
/* ==================================================
   Forecast widget
================================================== */
.dt-widget-forecast .dt-widget-body{
    padding:0;
}
.dt-forecast-row{
    min-height:64px;
}
.dt-forecast-day{
    width:70px;
    font-size:.85rem;
    font-weight:600;
}
.dt-forecast-icon{
    flex:1;
    text-align:center;
    font-size:1.6rem;
}
.dt-forecast-temp{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1;
}
.dt-forecast-temp strong{
    font-size:1.35rem;
    color:var(--dt-secondary);
}
.dt-forecast-temp span{
    margin-top:4px;
    font-size:.78rem;
    color:var(--dt-muted);
}
.dt-forecast-rain{
    margin-left:10px;
    font-size:.75rem;
    color:#0284c7;
}
@media(max-width:480px){
    .dt-forecast-day{
        width:55px;
        font-size:.78rem;
    }
    .dt-forecast-icon{
        font-size:1.4rem;
    }
    .dt-forecast-temp strong{
        font-size:1.2rem;
    }
}
/* ==================================================
   Forecast widget
================================================== */
.dt-widget-forecast .dt-widget-body{
    padding:0;
}
.dt-forecast-row{
    display:grid;
    grid-template-columns:
        minmax(70px,1fr)
        42px
        55px
        45px;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-bottom:1px solid var(--dt-border);
}
.dt-forecast-row:last-child{
    border-bottom:none;
}
.dt-forecast-row.is-today{
    background:#f8fbff;
}
/*
 Día
*/
.dt-forecast-day{
    font-size:.9rem;
    font-weight:700;
    color:var(--dt-text);
}
/*
 Icono
*/
.dt-forecast-icon{
    width:36px;
    height:36px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#f8fafc;
    border-radius:50%;
    font-size:1.5rem;
}
/*
 Temperatura
*/
.dt-forecast-temp{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    line-height:1;
}
.dt-forecast-temp strong{
    font-size:1.35rem;
    font-weight:800;
    color:#ea580c;
}
.dt-forecast-temp span{
    margin-top:4px;
    font-size:.78rem;
    color:#64748b;
}
/*
 Lluvia
*/
.dt-forecast-rain{
    font-size:.78rem;
    font-weight:700;
    text-align:right;
}
.dt-forecast-rain.has-rain{
    color:#0369a1;
}
.dt-forecast-rain.no-rain{
    color:#94a3b8;
}
/*
 Mobile
*/
@media(max-width:480px){
    .dt-forecast-row{
        grid-template-columns:
            1fr
            40px
            55px;
        padding:12px;
    }
    .dt-forecast-rain{
        grid-column:3;
        margin-top:-8px;
    }
    .dt-forecast-icon{
        font-size:1.3rem;
    }
    .dt-forecast-temp strong{
        font-size:1.2rem;
    }
}